Question

I am working on a project where I need to create an embeddable button. I just want to give some code to the clients and ask them to put it where they want the button to appear on their websites. What is the best approach to it? As an example please see the following image:

I will be really thankful if someone can provide some example code.

Answer 1

The simplest form would be to provide a hyperlink:

<a href="http://mysite.com/dosomething" title="DoSomething">Do Something</a>

Or you could use an image button:

<a href="http://mysite.com/dosomething" title="DoSomething">
    <img src="http://mysite.com/images/a.jpg" alt="DoSomething" />
</a>

These both remove dependencies on CSS and JS.

Or you can do it like suggested in your question:

<script src="http://mysite.com/scripts/embedbutton.js">
    document.write('<link rel="stylesheet" href="http://mysite.com/css/embedbutton.css" />');
    document.write('<div id="mybutton" onclick="DoSomething(event);">DoSomething</div>');

    function DoSomething()
    {
        /* action code here */
    }
</script>