Skip to main content
All CollectionsGoing Live
Using the Modal Mode to display a bot on your landing page or website
Using the Modal Mode to display a bot on your landing page or website

Learn how to add Automio's Modal Mode to your site for a more mobile responsive experience

Claudia King avatar
Written by Claudia King
Updated over a week ago

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 website/landing page and setting up a button to open the modal when it's clicked.


Adding the Modal Library to your website

Navigate to your site and find the option for you to add code to the head section of your html, then add the following script to the head.

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

On Leadpages this can be found under Settings -> Analytics:

Setting up the call-to-action button

Add a button into the web page and directly modify the buttons 'onclick' property to include where the link https://autom.io/o/automio/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx is replaced with the relevant bots direct link:

launchAutomioBot('https://autom.io/o/automio/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/embed')

Some websites/landing page software don't allow you to directly modify the 'onclick' property, if this is the case you will need to add the button in code.

In leadpages, you would use the 'Custom HTML' widget and then add the following:

<button
 onclick="launchAutomioBot('https://autom.io/o/automio/9bd19790-826a-11ea-8754-9b2c977589e0/embed')">Start Bot</button>

If the button doesn't style how you would like I recommend using an online button style maker to be able to modify this.


Did this answer your question?