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 two steps, adding the Automio JS Library to your landing page and setting up a button to open the modal when it's clicked.

The first step is on Leadpages to go to Settings -> Analytics and add the following script to the head.

<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 going to widgets -> buttons.

Once you have added a button you can edit the styling in Leadpages until you are happy with it.

To link the button to the bot go to link -> link to external URL then add the text #launchautomio and save.

Tip: You can duplicate your buttons and drag them so you have the same button in multiple places on your page.

Next you need to set up a 'Custom HTML' widget and 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>

Once you have set up the Custom HTML widget drag it to the bottom of the page.

Adding the Modal Library to your website

Setting up the call-to-action buttons

Set up a 'Custom HTML' widget