Adding a chatbot to your Leadpages landing page is quick and easy. You have three different options:

• Widget on click OR lightbox on click: A chatbot that pops up after a visitor clicks a specific button or link on your website. Engage with visitors in specific areas of your website, so you can learn more about them and qualify them further. All visitors to the page see this button or link and can click it to access the chatbot. Added to the html body of your site.
  
• Dynamic reachout: Uses Audiences, defining which type of visitors you want to target with a chatbot. You can show another Audience a different chatbot with different interactions. Added to the header.

Add a widget or lightbox to your website

Create the bot

Create the bot as you prefer, either from scratch or using a template. 

If an existing chatbot is close to what you're wanting, you can duplicate that one instead by clicking the three-dot menu by that bot and selecting Duplicate.

When you've added the interactions you want, routed them, and designed the bot as you like, navigate to the Publish tab.

Choose between two publishing options

• Lightbox on click: Opens over the whole website when clicked by the visitor and captures their attention completely.
• Widget on click: Pops up on the bottom right of the screen, within a chat frame. The visitor interacts with your bot within the widget and can still scroll through the website page.

Install the code

In OnceHub

You'll grab the code you need for Squarespace.

1. On the Share tab, choose the publishing option you want (see above).
2. Copy the code.

In Leadpages

You'll add an HTML widget on your landing page, in each place where you want a chatbot. This creates an iframe on the page, where your chatbot will appear.

1. Edit your landing page.
2. Click Widgets and drag the HTML widget onto your page. You may have to click Show More if HTML isn’t listed. Learn more about the HTML widget
3. Paste the code from OnceHub and adjust as needed (for instance, the text for the link).
4. Save the widget.
5. Make sure the size of the widget is large enough on your page to hold the embedded chatbot in it, as you want it displayed. 
6. Publish/update your landing page. 

That's it! Your landing page can now display your pop-up chatbot in the place you added it.

The default code you copied displays a link with the text "Start chat". You can adjust this text however you like. 

Use a button instead of a link

If you want a button for your chatbot rather than a link, you can use this code, adjusting relevant parts to identify your specific chatbot and define your preferences: 

<!-- ChatOnce embed START -->
<script id="co-index" src="https://cdn.oncehub.com/co/widget.js?website_id=WEB-##########&bot_type=2" defer></script>
<a 
style="
background-color: #006bb1;
border-radius: 50px;
padding: 10px;
color: #ffffff;
font-family: "Arial";
font-size:18px;
font-weight: normal;
text-decoration: none;
"
data-co-bot-display="pop-up" data-co-bot="BOT-##########" href="#" >Start chat</a>
<!-- ChatOnce embed END --> 

Items for updating in the button code:

• Website ID code (REQUIRED) - This starts with WEB-, followed by an alphanumeric sequence you can grab from your chatbot's code on the Publish tab. 
• Bot ID code (REQUIRED) - This starts with BOT-, followed by an alphanumeric sequence you can grab from your chatbot's code on the Publish tab.
• Optional styling:
  • background-color - Match your website's branding color
  • border-radius - The roundness of the button corner
  • padding - Size of the button around the text
  • color - Text color
  • font-family - The font you want the text to use
  • font-size - Size of font
  • font-weight - Normal, bold, etc.
  • text-decoration - Add an underline or other styling to the text
    • Keep in mind this will show at all times, whether hovering over the button or not

Add a dynamic reachout chatbot to your website

Create the chatbot

Create the chatbot as you prefer, either from scratch or using a template. 

If an existing targeted chatbot is close to what you're wanting, you can duplicate that one instead by clicking the three-dot menu by that chatbot and selecting Duplicate.

When you've added the interactions you want, routed them, and designed the chatbot as you like, navigate to the Share tab.

Install code

Installing the code is quick and easy. 

In OnceHub

You'll grab the code you need for Squarespace.

1. Go to the relevant chatbot
2. Click on the Share tab
3. Select Dynamic reach out → Add chatbot to targeting.
4. Once you've added it to the right targeting audience(s), select Installation.
5. Copy the code.

In Leadpages

You'll add the code to your header with code injection. 

1. Go to Settings for your landing page.
2. Select Analytics. 
3. Add the code to the Head Section Tracking Code section and click Save, then Update.

That's it! Your landing page can now display your targeted chatbot on the pages you want, according to the Audience rules you set.

Learn more about updating this section in Leadpages.