Adding ChatOnce bots to your ClickFunnels website

Adding a ChatOnce bot to your ClickFunnels website is quick and easy. You have three different options:

  • Standalone botDon't want to fuss with code and installation? No problem! Send your customers and leads straight to your bot with a simple link. 
  • Pop-up botA bot 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 pop-up bot. Added to the html body of your site.
  • Targeted bot: Uses Audiences, defining which type of visitors you want to target with a bot. You can show another Audience a different bot with different interactions. Added to the header.

Offer a standalone bot

No installation required in ClickFunnels! Simply create a new standalone bot and copy the link. 

  1. In OnceHub, go to Setup -> ChatOnce.
  2. Click on the Create bot button and select Standalone bot.

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

If an existing standalone bot 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. You'll find a standalone bot link you can copy.

Figure 1: Copy the link for your standalone bot

That's it! Send this link to whomever you wish, or use it in an ad or email campaign.

Add a pop-up bot to your website

Create the bot

  1. In OnceHub, go to Setup -> ChatOnce.
  2. Click on the Create bot button and select Pop-up bot.

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

If an existing pop-up bot 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: Opens over the whole website when clicked by the visitor and captures their attention completely.
  • Widget: 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 ClickFunnels.

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

Figure 2: Select the publishing option you want

In a text app

On your computer, in a text app, paste the code and separate it into two parts. 

For Part 1, include the second line of your pasted code:

<script id="co-index" src="https://cdn.oncehub.com/co/widget.js?website_id=WEB-##########&bot_type=2" defer></script>

For Part 2, include all the other lines of your pasted code.

<!-- ChatOnce embed START -->
<a data-co-bot-display="pop-up" data-co-bot="BOT-##########" href="#" >Start chat</a>
<!-- ChatOnce embed END -->

Note########## is an alphanumeric sequence unique to your account and bots, supplied in the pasted code.


In ClickFunnels

You'll add Part 1 of the code from OnceHub to your header for each individual funnel page where you want a pop-up bot. 

For Part 2 of the code from OnceHub, you'll add a custom JS/HTML element to that funnel page. This creates an iframe on the page, where your bot will appear. 

  1. Edit your funnel page.
  2. Go to Settings -> Tracking code -> Header and/or Footer Tab
  3. Add Part 1 of the code from OnceHub to your header. 
    • There may already be other code in your header, above or below where you add the OnceHub code. You can keep that code there or remove it as you prefer, depending on your preferences for keeping tracking codes for services like Google Analytics on that funnel page. Learn more
  4. Go to Elements -> Add element
  5. Scroll down to the Misc Elements category and select Custom JS/HTML.
  6. Open the code editor and paste Part 2 of the code from OnceHub. Adjust as needed (for instance, if you'd like a different height—so long as the height you choose is large enough to display any interaction on your bot). 
    • The Custom code type should be Regular HTML/JS.
  7. Save your website. 

That's it! Your website can now display your pop-up bot 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 pop-up bot rather than a link, you can use this code, adjusting relevant parts to identify your specific bot 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 bot's code on the Publish tab. 
  • Bot ID code (REQUIRED) - This starts with BOT-, followed by an alphanumeric sequence you can grab from your bot'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 targeted bot to your website

Create the bot

  1. In OnceHub, go to Setup -> ChatOnce.
  2. Click on the Create bot button and select Targeted bot.

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

If an existing targeted bot 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.

Install code

Installing the code is quick and easy. 

In OnceHub

You'll grab the code you need for ClickFunnels.

  1. Go to Setup -> ChatOnce.
  2.  In the lefthand menu, go to Targeted bot settings -> Installation
  3. Select to Install it yourself or Send to a teammate
  4. Copy the code.

Figure 1: Installation code for a targeted bot

In ClickFunnels

  1. Edit your funnel page.
  2. Go to Settings -> Tracking code -> Header and/or Footer Tab
  3. Add the code from OnceHub to your header. 
    • There may already be other code in your header, above or below where you add the OnceHub code. You can keep that code there or remove it as you prefer, depending on your preferences for keeping tracking codes for services like Google Analytics on that funnel page. Learn more

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


Was this article helpful?
Thank you for your feedback!