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 (29)

  • Can I use this widget to allow my users share their photos on my webpage? I have their instagram accounts and just need to show their photos. So i'll need the widget to be configurable with usernames loaded from my database, is that possible

    wp_oyepes

    • Hi there @wp_oyepes. Unfortunately it is not possible at the moment with our widget. We only support one Instagram username per single widget and they can only be created via our website. You would have to create separate widget for each of your user manually and embed it on your website. If you have more question, please send us a support ticket. We can give you some additional information there:)

      lightwidget

    • can you find the solution of your question , i also have the same question as you mentioned

      amirishaqu

    • Hi, when I paste this code, I get a message "Widget add-on required".. is there something I'm missing

      evanpriceofficial

      • Hi there! If you have upgraded widget code, please make sure that you are using upgraded widget code, not free one. If you don’t have the upgraded widget yet, you are most probably on HTTPS. We support SSL only in upgraded widgets. You can read more about it here: https://lightwidget.com/add-on/widget-upgrade

        lightwidget

  • How do you make the widget show the latest posts instead of randomly selected posts?

    probeautybuys

    • Hi there! Our widgets by default show latest pictures:)

      lightwidget

  • I think @probeautybuys means is that the widget is not updated with every new post in Instagram.

    mobesrl

    • Hi there! In such case, please check if the access token is valid. If it is expired we can't fetch new pictures from your Instagram profile. In case the token is active and you still don't get latest pictures in your widget, please create a support ticket. Provide us with your Instagram username and widget ID. We will investigate the problem on our end:)

      lightwidget

  • Is there a way I can use this for Adobe Dreamweaver? I've been attempting to add it but haven't had any luck. Wasn't sure if I was doing it right or if it doesn't work for it. Thanks.

    fallphotography_

    • Hi there! We don't really use the Dreamweaver here, but if you have the option to edit html code of your website, you should be able to paste the code and it should work fine. In case it does not, please create a support ticket and provide us with some screenshots or describe the issue. We will try to help you out:)

      lightwidget

  • I'm embedding your awesome widget on my page using html. But I'm running into a small "padding" issue. I have it set as a 3 x 3 widget and no matter what I set the padding to, I'm getting 3 extra pixels of padding on the bottom. To be specific, I'm trying to embed the widget inside a div tag with a 1 pixel black line border around it. And while the border fits perfectly on the top, right, and left, the bottom has 3 pixels of space between your widget and the border. Any suggestions?

    njfilmschool

    • Hi there! This small padding might be caused by line-height. You can add line-height: 0; to the container you have our widget embedded in. If it will not solve the problem, please create a support ticket and send us the link to your website where we can check out why there is some spacing under the widget:)

      lightwidget

  • Mine is still constantly flickering? do you not have a live chat or anyone that can help?

    foreveratwentysomethinggg

    • Hi there, Did you have a chance to look at following support article: https://lightwidget.com/widget-flickers-on-my-website ? Most probably you have two or more exactly the same codes embedded on your website. If the tips in this article will not help you out, please create a support ticket and someone will assist you:)

      lightwidget

  • It's helpful

    imbaduko.tv

  • Há como usar o widget em mais de um projeto que possuo?

    task_internet

    • Is there a way to use the widget in more than one project I own?

      task_internet

    • Hi there! You can use single widget on as many pages and websites as you want. We don’t limit particular embed code to given URL:)

      lightwidget

  • gostaria de centralizar o widget no site, não estou conseguindo.

    ioio_design_

    • Oi! Você pode usar alinhamento de texto muito text-align: center; no contêiner pai ou use flexbox ou margins para centralizar o widget. Em caso de problemas, crie um tíquete de suporte :)

      lightwidget

  • After embed i see "probbably was delete" and sad emoticons. wats happend?

    kropkaweb

    • Hi there! Please check this tutorial here: https://lightwidget.com/file-not-found-error-on-local If it will not help you out, please create a support ticket and provide us with the link to your website. We will check what’s going on:)

      lightwidget

  • not working

    vijaysharma0721

    • Hello! try this src="http://lightwidget.com/widgets/..." (force http in code) with me work!

      oficinadurio

  • hi! when I post the code how do I adjust where I want it placed, it automatically goes to the top of my page, I prefer it to be in the footer! thank you

    alliesdoingwork

  • find my widget embed code

    md.dibos.73

  • josealoizioortodontia profile picture

    generates the code but does not work, does not load

    josealoizioortodontia

  • Is it possible to add a [Load More] button after the Grid that will add another Row to the Grid?

    torben

You must be logged in to post comments.