Add a chatbot to your website that visitors can click to open

On-click chatbots will pop up after a visitor clicks a specific button or link on your website. This is useful for engaging with visitors in specific areas of your website, so you can learn more about them and qualify them further. 

Create the chatbot

1. In OnceHub, go to Chatbots.
2. Click on the Create chatbot.

Create the chatbot 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 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.

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 chatbot within the widget and can still scroll through the website page.

Install the code

In OnceHub

Grab the code you need for your website.

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

On your website

Add the code to your website on each individual page where you want the chatbot. This may involve creating an html widget, block, or some other custom html element, depending on how you build your website and which service hosts it.

That's it! Your website can now display your 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="<a dir="ltr" href="https://cdn.oncehub.com/co/widget.js?website_id=WEB-##########&bot_type=2" rel="noopener nofollow noreferrer" target="_blank">https://cdn.oncehub.com/co/widget.js?website_id=WEB-##########&bot_type=2</a>" 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