What is widget embed code?

Widget embed code is piece of code generated when you create a widget on our website. You need to copy that code to your website or blog to display our widget. Here is how our example widget embed code looks like:

<!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/cca06fa117d05edb9b8d6384be8175bb.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>

It contains 3 essential parts – comment tag, script tag and iframe tag.

 

Comment tag

<!-- LightWidget WIDGET -->

Comment tag is first part of our widget embed code and it is optional tag. It gives an information what kind of code is used or who is the creator of next part of widget embed code. This information is useful for web developers in case of debugging etc.

 

Script tag

<script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>

Script tag is necessary to provide proper responsiveness of our widgets. If you omit this tag our widget will not display full contents of our widget. We use advanced CDN to provide fastest loading time of this script no matter where you are located.

Common question is – can I just copy content of this script to my website instead of loading it from your CDN? The answer is – yes. However you must remember that sometimes  we update this script to provide new or better functionalities. If you store it locally on your website, please update it from time to time:)

If you wish to set fixed height of your widget, please omit this script tag and set desired height in iframe tag.

 

Iframe tag

<iframe src="//lightwidget.com/widgets/cca06fa117d05edb9b8d6384be8175bb.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>

Iframe tag will load our widget. This is essential tag, without it you will not see the pictures on your website. It has couple of attributes:

 

src attribute

src="//lightwidget.com/widgets/cca06fa117d05edb9b8d6384be8175bb.html"

This attribute points to your widget. It tells iframe which widget it should load. By default we omit the protocol (http: and https: ). Browser will know which version of the widget loads by your website protocol. For upgraded widget we also use advanced CDN. Instead of loading our widgets from //lightwidget.com we load our them from https://cdn.lightwidget.com Widget will load much faster in such case:)

 

scrolling attribute

scrolling="no"

By default iframe tag shows scrollbar. It doesn’t look very good, so we are hiding the scrollbars by adding this attribute. If you want to have your widget scrollable, please remove this attribute, our script tag and set fixed height of our widget.

 

allowtransparency attribute

allowtransparency="true"

By default iframe tag has a white background. The best experience is when our widget has your website background color which this attribute provides.

 

class attribute

class="lightwidget-widget"

This is optional attribute. It is useful for development and debugging or if you want to extract styles from style attribute to your CSS files.

 

style attribute

style="width:100%;border:0;overflow:hidden;"

This attribute provide basic styling for responsiveness and look of our widget. We remove some default styling from web browsers. If you wish you can remove this attribute and add following snippet to your CSS files:

.lightwidget-widget {
width: 100%;
border: 0;
overflow: hidden;
}

 

How to use widget embed code?

In order to embed widget on your website you must copy + paste your widget embed code into your website HTML code. There are various of CMSes which provides user interface for adding custom code to your website. On our frontpage we have tutorials for most popular integrations.  If you don’t have the user interface, simply place entire code into your HTML file template.

Comments (2)

You must be logged in to post comments.