Create a new interface

1. Click the Create button to begin building your chat interface.

   

2. Enter a name and description for the interface theme, then click Save.

   

   This opens the newly created theme in the editor, where you can begin customizing your chat window.
   

3. In General, set the following:
   

   

   • Name: Modify the given name when the interface was created or cloned.

   • Description: Provide information about the purpose of the interface.

   • Window Size: Choose the default size or a compact size for the interface. The default size has been designed to accommodate the typical script items used by most live agents or virtual assistants.

   • Window Rounded Corners: Adjust the size of the rounded corners on the chat application window.

   • Notification Sound: Set the sound played when an agent sends a new message.

4. In Color Settings, set the following:

   
   

   • Choose Preset Window Color Scheme: Select from the different color schemes. Each theme contains a primary and accent color, which appears in the interactive chat window as you select the colors. These theme colors set the other colors that appear in the chat window.

   • Customize Window Color Scheme: Slide the toggle to choose your own primary and accent colors.

     Note: Enabling this setting disables the Choose Preset Window Color Scheme options.
     

   • Primary Window Color Scheme: Click the color to modify the primary and accent colors that appear in the chat window.

     
     

   • Customize Window Element Colors: Click on the individual components of the chat window to change colors in those areas. By default, each color setting is set to Auto, which ensures that each color for the component is automatically selected based on the Primary and Accent colors.

     
     

     The automatically selected color conforms to the Web Content Accessibility Guideline (WCAG) for contrast compliance. If you choose a color that is not WCAG compliant with the section's surrounding elements, a warning will be displayed.

     

5. In Header, set the following:

   

   • Text/Graphic when Live Agent is Not Assigned: Defines what appears in the header before an engagement (when the customer has opened the application but has not yet typed a question) and after an engagement (the agent has resolved the conversation or the customer is taking a post-chat survey).

     • Content: Choose between three options: Graphic Only (such as a logo, useful for logos that contain text); Graphic + Text (the default setting, helpful for logos without text so the company's name can be included, or to include a label, such as "Customer Support"); and Text Only (best for sites with a minimalist design).

     • Header Message: Defines the text message when either Graphic + Text or Text Only options are selected.

     • Header Graphic: Use the default graphic, or click on the graphic to open a dialog to choose from an existing option, or to upload your own graphic (press the Add New button to upload an SVG, JPEG, PNG, or GIF file).

       

     • Graphic ALT text: Provides accessibility text to be read when the image is viewed by a screen reader. Can be left blank if your accessibility team determines that the image is decorative and does not convey information.
       

   • Text/Graphic when Live Agent is Assigned: Defines what appears in the header during an active engagement.

     • Content: Choose between three options: Same as Unassigned (uses the same settings as Text/Graphic when Agent is Not Assigned); Agent's name and description (the default setting, and helpful for identifying whether the agent is a bot or a human); and Custom Message (displays a text label).

     • Subtitle/Virtual Agent Subtitle: When set to Agent's name and description, sets the description for a live agent or a virtual assistant, to allow customers to differentiate between the two.

     • Title/Subtitle: When set to Custom Message, sets the customizable descriptions for the labels. Can be left blank.

   • Customize Header Icon Display: Choose from two options on placement of the minimize and close buttons in the header. These buttons are displayed on mobile screens, or when a desktop screen is small enough that the floating buttons are covered. The default selection places the close and minimize buttons on opposite sides of the header, to help prevent accidental selection.

     
     

6. In Option Menu, set the following:

   

   • Enable Options Menu: By default, this is enabled, so that all the sub-menu options are displayed. Clear to disable.

   • Menu Items: By default, all the sub-menu items are enabled, along with default descriptions for the labels and icons. Toggle Custom Icons to click on the icon and select from the preloaded options or upload your own icons.

     
     

7. In Conversation Panel, set the following:

   

   • Top Custom Content Area: Set the text and/or graphics that appear at the top of the transcript. Typically, this is used for disclaimers, such as Terms and Conditions.

     
     

     • Content: Select from Don't Show, Text only or Graphic + Text (the default setting).

     • Use custom graphic: Enabled by default. Use the default graphic, or click on the graphic to open a dialog to choose from an existing option, or to upload your own graphic (press the Add New button to upload an SVG, JPEG, PNG, or GIF file).

     • Icon ALT text: Provides accessibility text to be read when the image is viewed by a screen reader. Can be left blank if your accessibility team determines that the image is decorative and does not convey information.

     • Message: Enter the text for the displayed message. Uses standard HTML.
       

   • Virtual Assistant (VA) & Live Agent Avatar: Set the avatar that appears next to agent speech bubbles.

     • Content: Set as either Show avatar for VA and name for Live Agent (displays a graphic for the virtual assistant, and the first initial for the agent's name) or Show avatar for both VA and Live Agent (displays a graphic for both the virtual assistant and live agent).

     • Graphic: Use the default graphic, or click on the graphic to open a dialog to choose from an existing option, or to upload your own graphic (press the Add New button to upload an SVG, JPEG, PNG, or GIF file).

     • Avatar ALT text: Provides accessibility text to be read when the image is viewed by a screen reader. Can be left blank if your accessibility team determines that the image is decorative and does not convey information.
       

   • Virtual Assistant (VA) & Live Agent Name: Enable to display the agent's name in the chat bubble. This is not necessary if the header has been configured to display the agent's name.

   • Customer Name: Enable to display the customer's name in the chat bubble. When enabled, you can also select where the customer's name should be displayed (Position: within the top of the bubble, within the bottom of the bubble, outside and above the bubble, or outside and below the bubble).

     Note: Only enable if the Business Rules have been configured to pass customer names. Otherwise, it will read "You", by default.
     

   • Timestamps: Enable to display the time when each message was sent. This is typically only needed for asynchronous communications.

   • Message Rounded Corners: Adjust the size of the rounded corners on the message bubbles.

   • Bottom Content Area: Set the graphics that appear at the bottom of the transcript.

     • Content: Set as either Don't Show (to not display a graphic) or Logo only (displays the custom icon).

     • Use custom icon: Enabled by default. Use the default graphic, or click on the graphic to open a dialog to choose from an existing option, or to upload your own graphic (press the Add New button to upload an SVG, JPEG, PNG, or GIF file).

     • Icon ALT text: Provides accessibility text to be read when the image is viewed by a screen reader. Can be left blank if your accessibility team determines that the image is decorative and does not convey information.
       

8. In Text Input Area, set the following:

   

   • Customize Text Input Area: Configures the styling and text that appears at the beginning of an engagement.

     • Content: The text that appears by default in the customer's input area. The text disappears once the customer starts typing.

   • Emoji Selector: When enabled, adds a button to the chat application for the use of emojis.

     Note: Emojis are always supported in customer responses, regardless of this setting.

     • Use custom icon: When enabled, allows you to choose a non-default emoji beside the send button image. Use the default graphic, or click on the graphic to open a dialog to choose from an existing option, or to upload your own graphic (press the Add New button to upload an SVG, JPEG, PNG, or GIF file).

     • Icon ALT text: Provides accessibility text to be read when the image is viewed by a screen reader. Can be left blank if your accessibility team determines that the image is decorative and does not convey information.

   • Send Button Style: Defines whether an icon or text will be used to indicate the send option on customer input messages.
     

     • Use custom icon: When enabled, allows you to choose a non-default send button image. Use the default graphic, or click on the graphic to open a dialog to choose from an existing option, or to upload your own graphic (press the Add New button to upload an SVG, JPEG, PNG, or GIF file).

9. In Floating Button, set the following:

   

   These settings determine how the floating buttons in the lower-right corner of the screen will be displayed.

   • Button Size: Select between the default and a more compact size.

   • Button Icon: Select from the default icons.

     

     • Use custom icon: When enabled, allows you to choose a non-default send button image. Use the default graphic, or click on the graphic to open a dialog to choose from an existing option, or to upload your own graphic (press the Add New button to upload an SVG, JPEG, PNG, or GIF file).

   • Button Style: Select between round or square buttons.

   • Rounded Edges: Adjust the size of the rounded corners on the square buttons.
     

10. Once you have completed configuration, press the Save button.

11. The saved interface will be displayed in the list of saved interfaces.

    

12. To edit, clone or delete an interface theme, click the vertical-ellipsis icon on the left of the theme.

    

13. Select from the menu options.

    

    Note: File List opens the list of icons and image files that can be used in the interface. You can also upload custom images.