Chat Website Integration
About:
If you would like to have live chat (synchronous chat) on your website that you can respond to and manage within Echo, you can do so through Echo Chat Websites. This provides an opportunity for your team to be available at any time throughout the day to have conversations with visitors on your websites. The setup for this can be found in the Admin area of Echo under Admin-Websites
Live Chat Website Setup:
To begin setup, click on + New Website and work your way through the provided form.
Chat Client Style - You have three options for how the chat widget can display on your website.
- Full Screen: If full screen is used, once chat is selected on your website, the chat widget will open in a new browser window and will display content at a full screen view.
- Panel: Chat widget hovers on your webpage and opens up along the right side of the screen, allowing the majority of the website content to still be viewable while the chat is happening.
- Overlay: Chat widget hovers on your webpage and opens up as if it is floating over your webpage.
Locale - Pick the language that you want this chat widget to display in. (defaults to English)
Name - Friendly name for the chat website that will help admins and users in Echo to know where these chats are coming from.
URL - What is the Website URL that this chat widget will be placed on.
Hide Chat when no agents available (pop-up chats only) - If you want the chat widget to only display on your website when you have Echo users online and available to take chats, you can check this box. *Not available with Full Screen chat style.
Disable IP Address matching -
For client relationship matching (determining if the client is new or has communicated with you in Echo before) Echo uses three pieces of identifying information; A browser cookie, Client Email Address (if given), and Network IP Address.
If you check the box to disable IP Address matching, we will only use the browser cookie and email address information to make this client relationship determination. Some customers may choose to do this if they have concerns about multiple clients chatting from the same network IP and want to make sure they don’t get connected as one client.
Chat Timeout (in seconds) - How many seconds do you want the chat to attempt to connect to an Echo User before it times out. (default is 60 seconds)
Font Size - Defaults to Medium, you can make the Font/Text display slightly smaller or slightly larger with this setting.
Color - to change the Accent, Button, or Font color, click inside the color box. You have three options for setting the color; 1) Use the provided RBG color picker by clicking on the color display or entering the numbers, if known. 2) Use the provided HSL color picker by clicking on the color display or entering the percentages, if known. 3) Use the provided HEX color picker by clicking on the color display or entering the HEX number using #____, if known.
- Accent Color - The background color of the chat widget screens.
- Button Color - The button color to start a chat (regardless of selected color, button will be gray until required fields have been filled).
- Font Color - The color of the written text on the chat screens.
Banner Image - If you want to add a personalized banner on the chat widget to coordinate with your website, you can upload a banner image here. It will display under the Welcome header.
Chat Button Icon (only used for legacy panel) - If you want to add a personalized image to display the chat option on your website, you can upload that image here.
Chat Input Fields - there are three offerings for information you collect when someone wants to chat with you. You can determine which of these are used and whether or not they are required fields. The default is to have Name and Topic visible, but only Name as required.
- Name - Currently displays “What’s your name?” You have the option to change what this says by typing into the field provided (field must capture a client name). Also use the check boxes to select if this field displays to the client and if it is a required field for submitting a new chat.
- Topic - Currently displays “Topic?” You have the option to change what this says by typing into the field provided (field must capture a topic). Also use the check boxes to select if this field displays to the client and if it is a required field for submitting a new chat.
- Email - Currently displays “Email?” You have the option to change what this says by typing into the field provided (Field must be used to capture an email address). Also use the check boxes to select if this field displays to the client and if it is a required field for submitting a new chat.
Welcome Header - Will display at the top of your chat widget screen. Should not be longer than one sentence, intended to be a few words long.
Welcome Body - Will display below the client input fields. You can place any information you want the client to know before choosing to submit a chat to you.
Waiting Message - Will display to the client after they click on the submit button to start the chat. It will show to the client while they are waiting for their chat to be connected to an Echo User.
Unanswered Header - Will display at the top of the chat screen when a conversation times out without being claimed by an Echo User. Short phrase acknowledging the chat was not picked up.
Unanswered Body - Larger area of text showing just above the input fields for the client to submit their email information for a future reply. This is where you can provide additional details regarding your preferred way for the client to get in touch with you. (Example, Please try back later, or submit your details below for us to contact you).
Respond Using - When someone submits their email address on the timed out form, that communication will be turned into an email message in Echo to be responded to by users who have permission to see incoming emails. By default, we will use the first email account setup you have in Echo. If you would like to choose the email account your email replies will come from, select the email source from this list.
Privacy Policy - Enter your website privacy policy into this box. A link to this will display at the bottom of the chat widget screen.
Terms of Service - If you have terms of service (aka Terms of Use) you want your clients to abide by when chatting with your team, you can place them here. A link to this information will display underneath the privacy policy. (example: You agree to not swear, harass, or threaten our volunteers, etc…).
Click on the “Save Chat” button to save your setup.
Applying chat website widget to your Website:
Now that you’ve created the chat widget for your website, you need to add it to your website.
From the Admin-Websites area of Echo, find the website you just created and click on the “embed code” icon. This will open a box that has the code you will need to add the chat widget to your website. Provide the contents of this code script to your website developer.
Before adding to your website, you can offer a test of the setup by clicking on the icon under the “Link” category beside the chat website you just set up. From here you can test sending a chat to your system to make sure it looks and acts the way you intend.
Make sure you add the new chat website to a permission set before testing.
Once the chat widget is displaying on your website, make sure the chat website source has been added to a permission set or filter collection so that new incoming chats can be seen in the inbox for the desired Echo users.
