How to generate an HTML Snippet

The primary connection between BoldChat and your site is always a snippet of HTML code that you generate in BoldChat and insert to your site.

Members of a Permission Group with the following account permissions can use this feature:
  • Can Generate Chat Button HTML
  • Can Generate Visitor Monitor HTML
  • Can Generate Conversion Tracking HTML

The HTML snippet tells BoldChat servers how you are using BoldChat. When choosing an HTML snippet for your site, you are asking yourself the following questions:

  • Which button or link are you showing to visitors?
  • Are you collecting information about visitors so you can analyze and react to visits even before they chat?
  • Are you tracking conversion events so you can relate specific chats to actual sales or other milestones?
  • Are you inviting visitors to chat based on characteristics of their visit such as page visited, length of visit, and more.

Regardless of your reason for using BoldChat and the details of your exact implementation, you must integrate a BoldChat HTML snippet to create a "gate" between visitors and BoldChat servers.

  1. From the main menu of the operator client, go to Setup > HTML and select the type of HTML to generate:
    • Generate Floating Button / Visitor Monitoring HTML. Select this option when you want to implement a floating chat button and/or monitor visitors before chat and/or invite users to chat based on characteristics of their visit
    • Generate Chat Button HTML. Select this option when you want to implement a fixed-position chat button or link on your site.
    • Generate Conversion Tracking HTML. Select this option when you want to track conversion events so you can relate specific chats to actual sales or other milestones.
  2. Apply settings to your HTML and associated entities.
    Tip: This article focuses on the "big picture" of how to implement an HTML snippet rather than the potentially long chain of settings that you can make to the various BoldChat entities that can be associated with an HTML snippet, such as Custom Chat Button definitions, Custom Chat Window definitions, Website definitions, Department definitions, Auto-Invite Ruleset definitions, Conversion Code definitions, and more.
  3. Click Copy to Clipboard.
  4. When pasting the HTML code to your site, consider the following in light of your actual site architecture:
  5. Paste the code to your site.
    Important: Modifications to the generated HTML code may cause unexpected behavior and is not supported. For assistance or questions regarding the HTML snippet, contact Support.

    When pasting the HTML code to your site, consider the following in light of your actual site architecture:

    • To activate the code on all pages, paste the code into the footer include of your website before the closing <body> tag.
    • To activate the code per page (on a single page or multiple pages individually), paste the code into any page before the closing <body> tag.
    • If the chat button associated with your HTML uses a layered chat window, make sure your pages start with a <!DOCTYPE html> tag. Without this tag, some versions of Internet Explorer will use quirks mode and open the layered chat window in a pop-up.
    Tip: If you are sending the code snippet to a web developer via email, do not paste the code directly into an email message. Save the HTML code in a text file (use Notepad, for example) and attach it to an email.

You must re-copy and re-insert your HTML code after making any of the following changes:

  • When you associate a new Custom Chat Button or Floating Chat Button with your HTML (not modify an existing)
  • When you associate a new website with your HTML (not modify an existing)
  • When you toggle Pass Custom Visitor Information on/off
  • When you change the Conversion Code associated with your HTML
  • When you change the Auto-Invite Ruleset associated with your Visitor Monitoring HTML

If you no longer want to display a chat window on a specific web page, remove the chat button code from the HTML source of that page.