Adding the Modal Mode to your site is the most advanced option for sharing your bot, however it also delivers the best experience. If this is your first time sharing a bot make sure you check out the other options in case there is something simpler for your situation.

There are three steps, adding the Automio JS Library to your landing page, setting up a button to open the modal when it's clicked and adding the HTML code.

The first step is on Squarespace to go to Settings -> Advanced -> Code Injection and add the following script to the header.

<script src="https://storage.googleapis.com/automiojs/automio-v2.min.js"></script>

This is shown in the image below:

Setting up the call-to-action buttons

The next step is to set up your call-to-action buttons you can do this by adding a button to the page you want to link the bot.

To link the button to the bot edit the button and add the text #launchautomio to the Clickthrough URL the click 'Apply' and Save.

You can create as many buttons as you want.

Set up a 'Code' Content Block

Next you need to add a Code Content Block at the bottom of your page (highlighted in the image below):

Then add the following:


<script>

// Change the below URL to the direct link for your bot with embed on the end 
var botUrl = 'https://autom.io/o/timdemo/c973f4c0-9fb8-11ea-a9ea-bfeb61b0e154/embed'; 

// Don't change anything below this
init_automio(botUrl); 
var launchButtons = document.querySelectorAll("a[href='#launchautomio']"); 

for (i = 0, len = launchButtons.length; i < len; i++) { 
launchButtons[i].onclick = function (e) { 
e.preventDefault(); 
launchAutomioBot(); 
}; 
}
</script>

Your code block should look like this:

Now you can test your buttons!

Adding the Modal Library to your website

Setting up the call-to-action buttons

Set up a 'Code' Content Block