Sharing your chatbot

Share with a link

To design your page and generate a link, follow these steps:

1. In the chatbot builder, click the Share a link tab. 
   • You can also share from the lobby. Click the Share button next to the chatbot you want to share, then follow the instructions from point 4 below. If you click Design your page, follow the points below from step 2.
2. A page displaying a preview of your chatbot will load, with a toolbar on the right (Figure 1) allowing you to customize the title, colors, and other features of the page. Here, you can:
   • Choose the layout you prefer
   • Choose a color gradient, or upload an image as the background
   • Choose the color of the buttons on the page
   • Add an image such as a logo or profile picture
   • Write heading and body text
   • Add text to be displayed in a footer, such as a disclaimer
3. Once you are happy with the customizations you have made, click Save and then Share your page.
4. In the pop up that opens (Figure 2) you can:
   • Add UTMs to the link
   • Download the link as a QR code as opposed to a URL
5. Once you are happy with the URL settings, click Copy & close to copy the link, and paste it wherever you would like the share the link. 

Embed on your website

1. In the chatbot builder, click the Embed on website tab.
   • You can also share from the lobby. Click the Share button next to the chatbot you want to share, then on Embed on website, and follow the instructions below.
2. 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.

Note: When a visitor views your chatbot on a mobile webpage, the above settings will not be applied. The chatbot will only appear as an icon with a notification badge.

1. Once you choose an option for embedding, you can configure the appearance of your chatbot in the side panel. 
2. Once you're done, click Save.
3. 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

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.