Sharing your chatbot

Share a link to your chatbot

In the chatbot builder, click the Share tab, then under the heading Share with a link, select Add to page. Name your page and select the owner, and click Create.

This will open a Page builder with a toolbar on the right where you can customize a landing page as well as your chatbot. You can see a mock-up of your customizations on the left. 

 Once you have customized the page and chatbot, click on Share your page at the bottom of the screen. This will generate a link to a page which will host your chatbot. 

A pop up page will open. By clicking on the checkbox UTM parameters, you can add UTMs to the link. 

Click Copy & close. You can now share the link to your chatbot. 

Embed on your website

1. In the chatbot builder, click the Share tab.
2. Click Design and get the code under the heading Trigger on click.
3. From the tool bar on the right, choose between three publishing options, which are: 
   • Widget on load: The chatbot appears automatically when a page loads.
   • Widget on click: The chatbot shows in a widget, but only when a link or button is clicked. 
   • Lightbox on click: Opens over the page when a visitor clicks on a link or a button.
4. Once you choose an option for embedding, you can configure the appearance of your chatbot in the side panel. 
5. Once you're done, click Save.
6. Click the Get the lightbox or widget code. 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. If you want your chatbot to appear on all pages of your website, post the code in your website's footer. For more detail on installing the code, read on below.

You're all set! Your chatbot will now appear on your website according to the settings you have chosen.

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

Enabling a widget on load with automatic reach out

This option allows your embedded chatbot to greet your customers within parameters that you can define.

To configure your reach out settings, go to the chatbot lobby, then click the automatic reach out button. (Figure 1)

Learn more about using targeted chatbots and automatic reach out here.

Figure 1: The automatic reach out button in the chatbots lobby

To enable automatic reach out, you first have to define an audience. Learn how to do this here. 

1. Once you have defined an audience, click on Targeting on the toolbar on the left.
2. In the Targeting lobby, select the audience that you want to target.
3. Here, you can add rules for how this audience is targeted, and which chatbot will be displayed to them. 
4. Once you have set the rules for targeting, click Save

Figure 2: The automatic reach out lobby

Once you have set the Assignment and Design options to your liking, click on Installation. Follow the instructions on the page in order to embed the chatbot with automatic reach out into your website.