Squarespace Integration: Setup and Features

Re:amaze's JavaScript support widgets can be added to any Squarespace site. This article covers how to install the Shoutbox widget and the Contact Form widget.

Install the Shoutbox widget

Log into your Squarespace account and select Pages from the main navigation menu.

Squarespace organizes site content by hierarchy. To install the Re:amaze Shoutbox widget on your homepage, locate your main page anchor and select the gear icon to open that page's settings panel.

In the settings panel, select Advanced to open the HTML editor. Then navigate to the Re:amaze developer documentation and complete the following steps.

  1. Copy the script under Base Installation and paste it into the first line of the HTML editor.
  2. Copy the script under Brand Identification and paste it underneath. Replace {{ YOUR_BRAND_SUBDOMAIN }} with your subdomain name.
  3. Navigate to the Basic Shoutbox section and select the mode you want to install: Contact Mode or Self Service Mode.
  4. Copy the script under Installation and paste it underneath the previous scripts.
  5. Select Save.

To customize the widget trigger's appearance, copy the script under Customizing Trigger Color, Sizing, and Label. From there you can define the trigger's position, label text, size, icon type, and color.

Install the Contact Form widget

The Contact Form widget allows customers to fill out a form that logs as a conversation in your Re:amaze dashboard. Select the page where you want to install it and select the gear icon to open the settings panel.

Select Advanced and paste in the Base Installation script and the Brand Identification script into the header section. Select Save.

Navigate back to the page and select Edit to begin editing the page body. Move your cursor to the section where you want to insert the contact form until the insertion line appears, then select it.

Squarespace will prompt you to choose a widget to insert.

Search for the Code widget and select it. A code editor will appear.

Navigate to the Re:amaze developer documentation for the Contact Form, copy the script under Installation, paste it into the code editor, and select Save.

Not finding what you're looking for? Contact Us Directly