Sharing your chatbot

Sharing your chatbot

You can share your chatbot in 2 main ways. To select a sharing method, go to the Share tab.

Figure 1: Sharing your chatbot

1. Share as a page

You can create a standalone page and add a chatbot to it. This option allows complete customization of your chatbot so that you can match it to your branding. Once you have customized the page, you can simply click on Get page URL at the bottom of the screen. 

2. Embed on your website

Choose between three publishing options: 

• Lightbox: Opens over the whole website when a visitor clicks on a link or a button.
• Widget: 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.
• Dynamic reach out: Reaches out automatically to an audience defined by you.

Embed a chatbot on your website

Lightbox and widget

Once you click on the Widget or Lightbox option, you'll be directed to a page where you can Get the 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.

Dynamic reach out

This option allows you to embed a chatbot on your website which will greet your customers within parameters that you can define.

If you select this option, you will be directed to Targeted chatbot settings. Click on Installation to get the code. Once you or your teammate has the code, you can copy it and paste it in the admin area of your site, on whichever page(s) you'd like the widget to appear.

Figure 2: Installing your dynamic reach out chatbot

Send a link to a standalone bot

Standalone chatbots are the easiest way to get started. You can build one in a few minutes and then share it using a standalone link. They're great to use as campaign landing pages and there's no need to update your website.

Simply create a new chatbot and add it to a page. 

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

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

If an existing standalone 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 and routed them, you can design the chatbot as you like on the Configure tab. You have two design choices: 

Classic: Your chatbot appears centered on the page. You can define:

• Header logo
• Background color
• Background image
• Chatbot icon
• Chatbot color
• Chatbot name 

Modern: Your chatbot appears on the left of the page. On the right of the page you can add an image (like a logo or headshot), title, and additional text. You can also customize all the design properties included in the Classic view.

Once you've designed the chatbot to your organization's preferences, add it to a page. 

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

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

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