Please note: Squarespace has made the code block feature a premium feature available at their Business and Commerce plan levels. It is not available for Personal plans. You can read more about their premium features here.
Need to embed your widget on your Squarespace website? Here's how! After creating your widget following the steps in this guide, head to the editing area of your Squarespace site.
Contents:
Please note: Depending your site's version, some of the images below may look slightly different, but the primary embed process remains the same.
Placing Widget Code on Your Site
In the editor, choose to place a code block.
Paste the widget code you generated in the Qgiv control panel when you created your widget.
Click Apply or just click out of the code editor area to apply the new code.
Previewing Your Widget
You'll then want to preview your work in safe mode.
Please note: Depending on your site's version, you may not see the Preview in Safe Mode option once you add your code. If that's the case, skip to this section.
To view what it looks like on your public-facing site, you can open an incognito window (if you're using Google Chrome) and enter the URL of the page where you're embedding the widget. You won't be able to see the full embedded widget in the preview window in Squarespace. If everything looks good, click Exit Safe Preview and then click Save.
Once you've saved your work, you'll see something similar to the following:
Saving and Viewing Your Work Without Previewing in Safe Mode
Once you've embedded your widget's code, you'll likely see "Script Disabled" in the editor, rather than the widget you've just embedded.
To see your new widget on your site, click Done and Save in the upper-left corner of the screen. Once you've exited the editor view, your new widget should appear.
Disabling Ajax Loading
Please note: If your Squarespace site uses Version 7.0, you must disable Ajax loading for your embedded Qgiv form to display correctly.
To disable Ajax:
- In the Squarespace Home menu, click Design, and then click Site styles.
- Search for the Enable Ajax Loading option.
- Uncheck Enable Ajax Loading.
To read more about Ajax loading, check out Squarespace’s support documentation.
That's it! Your widget should now be embedded on your site and displaying properly!