Squarespace

📘

Don't have an Instabot account yet?

Start your free trial today!

Overview

This page will guide you through inserting web Instabot into any page of your Squarespace site, or how to configure Instabot to launch when a user clicks a link or button.

Contents

1. Insert Instabot into your Squarespace site
2. Advanced
   a. Launch Instabot on click

🚧

Prerequisites

1. Instabot portal account is created

2. Instabot conversation is created

1. Insert Instabot into your Squarespace site

📘

IMPORTANT

You only have to perform these steps once! Once the Instabot code is inserted into your website, you can change your Instabot's location, behavior, and content in the portal without touching any code, ever again!

1. In the Instabot portal, click 'Settings' in the side-panel - this is where you will find your Instabot JavaScript

2. Now let's insert the JavaScript into our Squarespace site!

3. Open your Squarespace site, click 'Settings' in the left-menu

5. Click 'Advanced'

6. Click 'Code Injection'

7. Paste in your Instabot JavaScript, then click 'Save'

8. That's it! Now, open your conversation in the Instabot portal, finalize the triggers, click deploy, and Instabot will begin appearing in your website!

2. Advanced

a. Launch Instabot on click

📘

This section will show you how to configure Instabot to launch when a user clicks on a specific link or button on your Squarespace page.

1. To start, let's create and assign an Instabot event-trigger to your conversation. Open your Instabot conversation, click Edit, then open the Triggers tab. Create a new event-trigger by selecting "event-trigger" in the dropdown, naming your event-trigger something intuitive like "need-help-button-click", click "Create New Event Trigger" to add it, then click 'Save'.

3. Now we will prepare the Instabot JavaScript snippet to insert into your page. In the below form, enter the required parameters and your Instabot JavaScript will be generated for you:

4. Now that we've prepared the Instabot JavaScript, we will now insert it into our page. Let's open our page in edit mode:

• Click Pages in the left-hand menu
• Find and select the specific page you want to insert Instabot into
• Hover over the page, find, and click Edit

2. Now we will add a code block into our page so the JavaScript has a place to live:

• Hover your mouse anywhere on the page until you see a bubble with a line appear
• Click the bubble, the Content Blocks menu will appear
• In the Content Blocks search field, type Code, then select the Code block

3. Next, we will insert our Instabot JavaScript into the code block:

• Copy the Instabot JavaScript we prepared in the last section
• Paste it into the body of the code block - don't touch the HTML or Display Source settings
• Click Apply in the code block
• Don't click Save in the top-left menu yet because we want to add a button to the page before finishing

4. Now, we will add a button for the user to click and launch the Instabot:

• Hover your mouse anywhere on the page until you see a bubble with a line appear
• Click the bubble, the Content Blocks menu will appear
• In the Content Blocks search field, type Button, then select the Button block

5. Give your button some text. We'll call it Want to learn more about Instabot?

6. Finally, we will link the button to our Instabot JavaScript:

• Click the the Clickthrough URL field, select External
• Type in javascript:buttonClick(), then press Enter
• Click Apply
• Finally, click Save in the top-left corner

That's it! Log out of Squarespace and reload the page that you just edited, click your button, and you will see your Instabot launch!