Create Guide Templates

Templates determine how Guide displays selected entry points on your website. Template types include:

  • Single button: Use this to offer a single entry point in the Guide widget.

  • Multiple button menu: Use this to offer multiple entry points in the Guide widget.

  • Customer portal: Use this to offer a Expert knowledge base as a customer portal and additional entry points in the Guide widget.

Be sure you create the channel buttons and entry points before starting this task.

If you are using a multi-button template, you will need channel buttons and a menu button. Visitors click the menu button to display the channel buttons.

Create a Single Button Template

Use a single button template when you want Guide to direct visitors to just one channel.

Myra, the Jungle Support manager, wants to offer the chat channel on the home page of the website. She creates a single button template that offers the chat button that appears at the bottom-left of the home page of the Jungle website:

A round button with an image of chat bubbles that customers click to start a chat with an agent.

If a visitor clicks the chat button, the chat channel appears in the Guide widget:

The Guide chat window where you enter identifying information before starting a chat.

  1. Click the app selector icon of app selector and select Guide.
  2. Click Templates.
  3. Click New Template.
  4. Enter a Template title.
  5. Set Template type to Single Button.

  6. In the Design Editor tab, set the values to control the appearance of the template.

    Field Details
    Position Set Position to Bottom right or Bottom left to determine where the Guide template appears on your website.

    Theme color

    If needed, enter a Theme color to use for the template. Leave this field blank to use the Theme color set in the branding. To override the branding, use the color picker to select a color or enter the hex code for the color.
    Font color If needed, enter a Font color to use for the template. Leave this field blank to use the Font color set in the branding. To override the branding, use the color picker to select a color or enter the hex code for the color.

  7. In the Template Channel tab, define the channel to use for template.

    Field Details
    Entry point Select the Entry point to use for the channel. For example, you might set it to a chat entry point to offer the chat channel. Depending on the type of channel selected, you may see additional fields to define.

    Button

    Select the Button to use for the channel. Leave this blank to use the button defined for the entry point.
    Label Enter the Label to use with the button. The label appears to the right of the button. The label is limited to 18 characters. Including a label is optional. Note that the label is also used by screen readers. If omitted, the screen reader will read the text of the button.

  8. If you set Entry point to a chat or email channel, and if the entry point is configured with a precontact survey, additional optional fields appear. Click Choose File to select a Precontact survey icon and enter a Precontact survey label to define an icon and label that appears at the top of the Guide widget:

    Guide widget that shows a precontact survey that includes an icon and label.

  9. If you set Entry point to an Expert channel, specify the Popup Title. For example, you might title the pop-up Helpful Articles.
  10. Click Save.
  11. Check the appearance and behavior of the template.

Create a Multiple Button Menu Template

Use a multiple button menu template if you are using Guide to display multiple channelsClosed A way for contacts to interact with agents or bots. A channel can be voice, email, chat, social media, and so on. at a time. You can include up to four channels.

Myra, the Jungle Support manager, wants to offer the chat and email channels on the home page of the website. She creates a multiple button template. The menu button that she set for the template appears at the bottom-left of the home page of the Jungle website:

A round button with an image of concierge desk bell that customers click to display the Guide channel menu.

A website visitor can then click the menu button to display the menu of channel buttons:

An example Guide menu that offers the chat and email channels. The chat channel shows two chat bubbles. The email channel shows an envelope.

For example, if the visitor wants to start a chat, the chat window appears:

The Guide chat window where you enter identifying information before starting a chat.

  1. Click the app selector icon of app selector and select Guide.
  2. Click Templates.
  3. Click New Template.
  4. Enter a Template title.
  5. Set Template type to Multiple Button Menu.

  6. In the Design Editor tab, set the values to control the appearance of the template.

    Field Details
    Position Set Position to Bottom right or Bottom left to determine where the Guide template buttons appear on your website.

    Theme color

    If needed, enter a Theme color to use for the template. Leave this field blank to use the Theme color set in the branding. To override the branding, use the color picker to select a color or enter the hex code for the color.
    Font color If needed, enter a Font color to use for the template. Leave this field blank to use the Font color set in the branding. To override the branding, use the color picker to select a color or enter the hex code for the color.
    Template direction Set the Template direction for your channel buttons to expand when the menu is open. Options are Vertical or Horizontal.
    Menu button Select the Menu button that displays the menu of channel buttons available to the visitor.

  7. In the Template Channel tab, define up to four buttons, one for each channel to offer.

    Field Details
    Entry point

    Select an Entry point to use for the first channel.

    • If you set Entry point to a chat or email channel, and if the entry point is configured with a precontact survey, additional optional fields appear. Click Choose File to select a Precontact survey icon and enter a Precontact survey label to define an icon and label that appears at the top of the Guide widget:

      Guide widget that shows a precontact survey that includes an icon and label.

    • If you set Entry point to a knowledge base, specify the Popup Title. For example, you might title the pop-up Helpful Articles.

    Button

    Select the Button that displays the channel. Leave this blank to use the button defined for the entry point.
    Label Enter the Label to use for screen readers.
    Add Channel

    Click to define another channel to include in the template. You can add up to four channels.

    Each template is limited to a single Knowledge Base channel and a single chat channel.

  8. Click Save.
  9. Check the appearance and behavior of the template.

Create a Customer Portal Template

Use a customer portal template to offer a Expert portal and up to four channelClosed A way for contacts to interact with agents or bots. A channel can be voice, email, chat, social media, and so on. entry points at the same time. This requires an integration with Expert.

Myra decides to offer customer portal that provides articles about the top 10 questions visitors ask Support. She also wants to offer some other channels, such as chat and email. She creates a customer portal template. The menu button that she set for the template appears at the bottom-left of the home page of the Jungle website:

A round button with an image of concierge desk bell that customers click to display the Guide customer portal.

A website visitor can then click the menu button to display the portal and the channels she configured:

An example Customer Portal template that shows buttons for the chat and email channels followed by two CXone Expert articles.

  1. Click the app selector icon of app selector and select Guide.
  2. Click Templates.
  3. Click New Template.
  4. Enter a Template title.
  5. Set Template type to Customer Portal.

  6. In the Design Editor tab, set the values to control the appearance of the template.

    Field Details
    Position Set Position to Bottom right or Bottom left to determine where the template appears on your website.

    Theme color

    If needed, enter a Theme color to use for the template. Leave this field blank to use the Theme color set in the branding. To override the branding, use the color picker to select a color or enter the hex code for the color.
    Font color If needed, enter a Font color to use for the template. Leave this field blank to use the Font color set in the branding. To override the branding, use the color picker to select a color or enter the hex code for the color.
    Main icon Upload a Main icon. This is an image, such as a logo, that appears in the top left corner of the customer portal template. Images must be smaller than 50 KB. This image is required.
    Heading Enter a Heading. This is the text that appears at the top of the template. For example, you might set this to Welcome. The heading is required.
    Sub heading Enter an optional Sub heading. The sub heading appears under the Heading. For example, you might set this to How can we help you?. This text appears in the font color specified for the brand.
    Template outline

    • Set Template outline to determine the order in which the template content appears:

      • Channels first to display the channel buttons at the top of the template and the Expert portal below.

      • Knowledge base first to display the Expert portal at the top of the template and buttons for other channels below.
    Menu button Set the Menu Button. A button that displays the menu of channel buttons available to the visitor. Click Select item to select the button the visitor clicks to display the menu of channels.

  7. In the Template Channel tab, define up to four buttons, one for each channel to offer.

    Field Details
    Entry point

    Select the Entry point to use for the first channel. It can be any entry point expect a Knowledge Base entry point.

    If you set Entry point to a chat or email channel, and if the entry point is configured with a precontact survey, additional optional fields appear. Click Choose File to select a Precontact survey icon and enter a Precontact survey label to define an icon and label that appears at the top of the Guide widget:

    Guide widget that shows a precontact survey that includes an icon and label.

    Button

    Select the Button to use for the channel. Leave this blank to use the button defined for the entry point.
    Label Enter the Label to use for the button. This field is required. The label is limited to 18 characters. The label is also used by screen readers.
    Add Channel

    Click to define another channel to offer in the customer portal. You can add up to four channels.

    Each template is limited to a single chat channel.

  8. In the Knowledge base tab, define the content to appear in the customer portal.

    Field Details
    Knowledge base entry point Select the knowledge base entry point to use for this template. The entry point must contain the articles that you want to offer to your website visitors when this template appears.

    Heading

    Enter the heading to use for the knowledge base. For example, you might set this to Helpful articles.
  9. Click Save.
  10. Check the appearance and behavior of the template.

Check the Template Appearance and Behavior

Once you specify all of the required fields for a template, a preview appears in the lower right corner of the page.

The Edit Template page. The template preview appears in the lower right corner after all required fields are specified.

If you continue making changes to the template, the preview is refreshed. Use the drop-down in the upper right corner to preview the template with different branding settings.

If the preview is not working as you expect, check the following:

  • Have you set a value for each required field? You may need to display multiple tabs to see all the required fields for a template. Template Title is also a required field.

  • Are the values you set valid? Although Guide has length limits for text fields, Guide does not enforce the limits when setting the value. You can use the Tab key to move around the page and make sure the required field values are valid. If they are not valid, an error message appears after you move to the next field.