Widgets embed these on your own site

Widgets are self-contained mini-apps that you can put on your own website. You can drop them on any web page. Scubbly's Widgets are very simple to install.

Step one: Configure your widget

[r]

more of these will be added soon!

Step two: Put this placeholder element on your page

This code is generated by the choices you made above. Copy and paste it into your HTML layout.

It is strongly recommended that you copy and paste this code without changing it in any way. Malformed HTML in the placeholder can cause unpredictable errors.

Step three: include the master script

Put this code in the <head> section of your web page:

... and you're done!

Technical Explanation

The placeholder

The <div> element you put into your page layout is a placeholder. It marks the spot where the embedded widget is going to go.

It has a special class name: "scubbly-widget". It is not a good idea to define CSS styles for that class.

The placeholder also has another important class - it's a string enclosed by curly braces "{" and "}". In fact, it's a data object expressed as JSON. The structure of this object is expressed as:

  • productid

    This is a required property. It is the ID number of the Scubbly product you will be embedding.

  • affid

    This property is optional. It is the affiliate ID that will be credited with commissions for sales referrals from this widget.

  • creative

    This is where you specify the design of the widget. "Creative" - as a noun, not an adjective - is a term used in advertising to refer to the design of an ad. The value of this property must be one of the preset creatives available. There aren't many right now, but there will be more soon!

  • style

    This element has no value of its own, and may have only one child:

    • bgcolor

      This is the background color that will be shown in transparent areas of the widget. If the page you will be embedding this on has a background color other than white, you should set this property to match. The value of this property must be a valid CSS-style HEX color preceded by a hash, like "#ff62b8" or "#bbb". The widget background is a flat color - it can not be a gradient or image.

The master script

The script you inject into the <head> is hosted at Scubbly, and included on your page. It looks for placeholders on your page, and replaces them with widgets.