The Mobi Developer Hub

Welcome to the Mobi developer hub. You'll find comprehensive guides and documentation to help you start working with Mobi as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Squarespace

Integrate web Instabot into your Squarespace site

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

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. Get your Instabot API key from your portal account
Get Instabot JS from portal

Get Instabot JS from portal

  1. Paste your API key into the Instabot JavaScript generator below, then click "get my script!"
  1. You've generated your Instabot JavaScript successfully . Now let's insert the JavaScript into our Squarespace site!

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

  1. Click 'Advanced'
  1. Click 'Code Injection'
  1. Paste in your Instabot JavaScript, then click 'Save'
  1. 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'.
  1. 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:
  1. 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
Open page in edit mode

Open page in edit mode

  1. 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
Add `code` block into our page

Add code block into our page

  1. 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
Insert Instabot JavaScript

Insert Instabot JavaScript

  1. 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
Add a button

Add a button

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

Give our button some text

  1. 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
Link the button with launching Instabot

Link the button with launching Instabot

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!