widget

getting started

The easiest way to embed a widget on your site is to copy and paste the code into the area where you want the widget to appear. Be sure to change the channelId attribute to the channel ID of the channel you want to play. This ID number can be found in the address bar of your browser when you click into a channel.

The height generated by the embed user interface is the total height of the widget, not the height of the display area. You must subtract 42 to get the height of the display area. For example, a generated total height of 362 will yield a display height of 320.

<html>
    <head></head>
    <body>
        <script
            type="text/javascript"
            src="http://www.veetle.com/widget/script.js">
        </script>
        <div
            veetleChannelId="123456789"
            autoPlay="false"
            style="width: 480px; height: 362px"
            aspectRatio="default">
        </div>
    </body>
</html>

multiple widgets on a page

If you need multiple widgets on a page, you should only include the script tag once. If the script tag is included multiple times, unexpected errors will occur. Here is an example of how to get multiple widgets working:

<html>
    <head></head>
    <body>
        <script
            type="text/javascript"
            src="http://www.veetle.com/widget/script.js">
        </script>
        <div
            veetleChannelId="111111111"
            autoPlay="false"
            style="width: 480px; height: 362px"
            aspectRatio="default">
        </div>
        <div
            veetleChannelId="222222222"
            autoPlay="false"
            style="width: 480px; height: 362px"
            aspectRatio="default">
        </div>
    </body>
</html>

Help! My widgets look screwed up!

Your site's existing CSS or Javascript may be interfering with Veetle's widget. Make sure that you don't do any of the following:

Do not have any CSS classes or ID's that start with veetle.
Do not have a global Javascript variable named VEETLE or Prototype.
Do not have crazy Javascript animations that push the players around.

If you are still experiencing problems after resolving the above issues, please contact us. We are glad to work with you to fix the problem.

Wordpress

Are you using Wordpress to manage your webiste? Wordpress will not allow you to directly post our widget code. It will strip out the script tags. To make the code work in Wordpress, follow these steps:

Create a blank post using Wordpress' usual interface.
Go into your localhost or web host's control panel's phpMyAdmin.
Select your wordpress database in the left navigation area.
Go into the wp_posts table (also in the left navigation area).
On the right content area, click the post_date table column twice so that you sort by date descending and your newest post pops up to the top of the list.
Click the pencil icon next to your newest post. Make sure its post_name column is just a number, not #_autosave or #_revision.
Copy and paste the widget code into the post_content text area. Click the ok button on the bottom. Now you're ready to go!