Chat Designer: Overview

Overview

The Chat Designer is the next generation design interface for the new Visitor Chat window. You can access these settings here: https://app.velaro.com/#/admin/design/chat-designer

The Chat Designer combines the Inline Chat and Popout Chat design screens from the Design menu (Account Setup > Design), along with the Engagement Scripts, Popout Chat and text chat screens from the Deploy menu (Account Setup > Deploy) in a single interface to design and deploy all implementations of the Visitor Chat Window.

See Visitor Chat Window for more information about the Visitor Chat experience.

Design Screens

Global

  • Primary background color
  • Primary text color
  • Font: Choose from several fonts
  • Background image: use our default, none or upload your own
  • Header transparency- Use the slider to change the transparency
  • Force minimized header- Use a smaller header size
  • Header title- Change to your company name
  • Border radius- round r square the corners of the chat window
  • Frame background color: background color for the chat portion of the window
  • Frame width & height: Adjust the size of the chat window
  • Enable Pop-out: Allow visitors to pop the chat window out of the inline position into its own window
  • Social Media links: Add the icons and links to your social media ages to the chat header

 

Logo

Change the image from the chat bubbles to your logo or other custom image

 

Intro

The text that will appear in the chat window and visitor text area if no Pre-chat survey is enabled

 

Queue

  • Queue header text
  • Queue position text
  • Enable/Disable the queue timer

 

Chat Configuration

Enable or disable the options for the visitor to:

  • Print the transcript
  • Email the transcript
  • Upload files to the agent

 

 

  • Use the Star rating
  • State the Purpose of the rating
  • Change the chat text color
  • Use the Agent Headshot, Company Logo or other image in the header during the chat
  • Placeholder text: for the visitor chat box
  • New message sound: Choose the sound the visitor hears when the agent sends a reply

 

Chat Notices

Change the language of the default system notices

Launcher

Change the options for the inline chat icon. There are tabs for Available, Unavailable and Chatting options

  • Border radius: Round or square the icon
  • Icon: Change the chat bubble to another image like your logo
  • Text: Text will show to the right of the icon, phrases like "Live Chat" or "Chat Now" can be added
  • Sliders: use these to adjust icon's
    • Font size
    • Icon height
    • Icon width
    • X Position
    • Y Position
    • Padding
  • Background color
  • Text color

Dynamic Button

You can also launch chat as a separate chat window using a Dynamic Button. Add options for:

  • Online
  • Offline

Eye Catcher

Use an image to direct the visitor to the chat launcher options for:

  • Available
  • Unavailable

 

Drop-down Menu 

Copy Settings

If you have more than one group and want to copy the design options from one group to another, use this option to copy another groups settings into the group you've selected in the drop-down menu

Reset Default Settings

 

Test

Test the visitor side of the chat prior to deploying any code on your pages

Deploy Chat code

 

Deployment Options

Inline Chat

Pop-out Chat from a Dynamic Button

Pop-out Chat from a Hyperlink

Other


 


Was this article helpful?