Embed other widgets

Hello!

Is there anyone out there that knows how to embed other widgets?

I have a button that can trigger a lightbox to come up and wonder if its possible to do this easy? Im not a coder so…

/Daniel

Hi Daniel, In my own experience, It seems to me, that it depends on the “widget” you are trying to implement…some work better than others… In general, a lightbox should not be a problem. You may need to include some script files for the lightbox into the Custom Code section of your webflow site, and load any necessary css files into the Head section of the site settings, and give your DIV’s or elements the appropriate ID’s or class names or custom data attributes that your Lightbox is expecting. Some external widgets may work without those kinds of settings. AddThis, the social sharing widget, can be embedded direct, without having to mess with scripting files… as an example.

Can you give the name of the lightbox you are using? I have a large library of these kinds of things, so I can probably check it real quick…

Here is an example of an external lightbox that does NOT use webflow objects, just the widget html inside the embed object, and I am referencing a couple of script files hosted on another server, and the images are hosted on another server as well:

http://widgetsdemo.webflow.com/

In this case, for this slider, I am calling the lightbox javascript from a content delivery network where the javascript script is hosted, as well as the images. So yes, you can load external content and lightbox scripts into webflow hosted sites.

You wll probably always need to check though, for each kind of “embed widget” that you use, that the widget in question will work, as it is possible, not every embed widget will work… but if you can access the script code from somewhere hosted on another server, and there is no scripting conflict (like different versions of jQuery) then they should work. Best to try out individual external widgets as you go, before you promise someone that it will work for sure :smile:

Cheers

Hi there Dave and we really appriciate your help, maybe you can help us further! :smiley:

Here is the deal:

  1. We are building a site for our non-profit organisation and will use causevox.com to raise funds. This site have widgets and one of them is an lightbox poping up when press DONATE. We used the code to one button on our webflow site but want to learn how we can add that function to any buttons in webflow.
    This is how it looks as an example. http://triforcharity.webflow.com/my (please dont share this link).

If you have time too look at this we really appriciate your help. You might be the first person to volounteer for us :smiley:

Hi, sure Daniel, why not, I might be unemployed, but the positive side to that, is that I have time to help out out a good cause and help others :smile:

I will send you a pm for more info :smile:

Hi again, sorry i did not see rest of your answer, thank you for your help!

What i dont understand is how i can apply the javascript to an button in webflow? Can i tag it with attributes or something in webflow?

Hi, well what you do is to assign the button a unique ID, or a class name, and then you can refer to that unique ID or class name in the javascript or jQuery code that you right… jQuery is just a common library for javascript that have many good functions, and jQuery is added by default to webflow websites.

So once you add an ID or class to a button, you can then take actions on that button (referring to it’s ID or class) when the button is clicked for example. The actual javascript or jquery code is placed in the custom code section of the site settings, in the before body code box. You can also link to an external javscript file with .js extension, and you can store all your code there also, which helps to keep your html page uncluttered with lots of script calls…but that is optional.

Cheers

2 Likes

thanks Dave! its triforcharity.causevox.com :smiley:

You are awsome and truly saving lives right now!

1 Like