Jump to content

Not able to embed two widgets on the same page using code block

Go to solution Solved by paul2009,

Recommended Posts

Hi,

I am trying to embed two widgets side by side, using code blocks. I add them in the editor, but when I save it and check the live webpage, only the first widget shows up. I'm on Squarespace 7.0, using the Pacific template. As far as I can tell, there is no Ajax option, so that should be off.

Here's the URL, which only shows one widget, when there should be two similar widgets side by side:

https://www.childrenschoir.com/givelively-embedded-test

 

This is what the widget's code looks like:

<!-- Begin Give Lively Fundraising Widget -->
<script>gl=document.createElement('script');gl.src='https://secure.givelively.org/widgets/branded_donation/roanoke-valley-childrens-choir-inc/team-soprano-musical-sparks-scholarship-fundraiser.js';document.getElementsByTagName('head')[0].appendChild(gl);</script><div data-widget-src='https://secure.givelively.org/donate/roanoke-valley-childrens-choir-inc/team-soprano-musical-sparks-scholarship-fundraiser?ref=sd_widget' id="give-lively-widget" class="gl-branded-donation-widget"></div>
<!-- End Give Lively Fundraising Widget -->

 

I attached a picture of what it looks like in the editor, correctly showing both widgets side by side, and what it looks like on the live website, not showing both of them.

editor - both widgets seen side by side.png

live website - only one widget seen.png

Edited by npd1987
added more info
Link to comment
  • Solution
7 hours ago, npd1987 said:

I am trying to embed two [Give Lively] widgets side by side, using code blocks. I add them in the editor, but when I save it and check the live webpage, only the first widget shows up.

Give Lively have coded their Donation Widget in such a way that you can only place one per web page. (If you are interested in the technical reason, it is because they assign an HTML id attribute to the element that is used to attach the code. You cannot have more than one element with the same id on a webpage, which is why the second one cannot be used.)

To have more than one Donation Widget on your website, you'll need to place them on different pages. They document this in the Give Lively support guide entitled Use embeddable widgets to collect donations on your website.

I appreciate that's not what you wanted to hear but I hope this answers your question.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

Update:

After it was pointed out that the widgets weren't working because they have the same ID, I went to one of the externally linked javascript files for the widget (https://secure.givelively.org/widgets/branded_donation/roanoke-valley-childrens-choir-inc/team-alto-musical-sparks-scholarship-fundraiser.js), copied it, changed everywhere I found the existing ID in the  javascript to a different ID, used the same new ID in the html div element in one of the widget's embed codes, then put the new javascript in my Squarespace page code injection, and it worked!

https://www.childrenschoir.com/givelively-embedded-test

Edited by npd1987
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.