Follow the steps below to embed the branded widget on your Squarespace site.
- In the Nonprofit Admin Portal, click the "Widget" tab in the menu on the top of the dashboard.
- Click "Branded Donation Widget" on the lefthand menu.
- You'll see a preview of your widget on the righthand side of the page.
- Next, associate your widget with one of your customized fundraising pages. The widget will adopt your campaign’s styling and donation frequency. In addition, donations from the widget will be associated with this fundraising page in data you get from our platform.
- Click "Get Embed Code" then select the div element of the code. It will look like this: <div data-widget-src='https://38293fbc.ngrok.io/donate/helen-keller-foundation?ref=sd_widget' id='give-lively-widget'></div>
- Click here and follow the instructions provided by Squarespace.
- Paste the div element from above into the Code element on the page where the widget will appear.
- Copy the script element from the embed code. The section starts and ends with "script" and will look like this:<script>gl=document.createElement('script');gl.src='https://secure.givelively.org/widgets/branded_donation/helen-keller-foundation.js?show_suggested_amount_buttons=false&show_in_honor_of=undefined';document.getElementsByTagName('head').appendChild(gl);</script>
- On the lefthand menu of the page in Squarespace, go to "Settings", then "Advanced", then click "Code Injection" and paste the script code into the "Header" section.
- If the widget appears to be cut off after you paste in your code, simply refresh the page and the full widget should appear.
Please contact us at firstname.lastname@example.org if you have any problems setting up your branded widget.