Home > Style Guide – Mobile Browsers

Categories:


(Last Updated On: July 18, 2017)

**This is for Legacy users only. Users who signed up prior to 1/4/17. If you have the Design Studio, then your buttons, chatbox and forms will be mobile optimized automatically.**

The Mobile Browser section within the Style tab allows you to customize your mobile browser chat experience. Here, you can choose to permit chat for mobile users and modify the chat box settings. With the check of the box, chat will be immediately available for mobile visitors for both chat and offline interactions. Please note, you do need to have the SnapEngage code snippet on the mobile site.


Turn Mobile Optimized Chat On!

Login to the Admin Dashboard

Once logged into the Admin Dashboard, go to the Style tab. In the Style section, there is a button for Mobile Browsers. Click there to get to the mobile settings.

Check the box to activate Mobile Optimized chat

Check the box (shown below) to activate mobile chat on your site. The mobile chat will show you the floating button (required) and the interface will show a full screen chat when opened.

Top 1

Next, move on to configuring your mobile interface.


Configure Mobile Chat Interface

Button

This section will permit you to pick your button position on the mobile device. Pick a location that is not obstructive to the site content but still is clear to the visitor.

You can also customize the button color when agents are available and offline as well as the text the tab will display to the visitor.

Merged 1

Don’t want to get offline messages from mobile visitors? No problem. Simply check the box to remove the button when agents are offline.


Chat – Background

You chat area can be adjusted to the look and feel you want with just a few clicks.

Choose your background color and border width using exact hex color codes. Keep in mind the visitor will be reading the chat text in this area and keep the colors contrasting. Light colored backgrounds and dark fonts work very well.

hex

Chat – Page Header

Chat will display in full screen on the mobile device, so a clear header provides users with a helpful reminder that they are in chat. Select a color, Title, and Chat Title.

For the location in which the visitor enters in their chat conversation, you can customize a placeholder message to remind them to enter their text. Also customize the colors of your buttons and the button text.

Photo 3

The conversation can also be customized. Choose colors for the the text bubble for the visitor and the agent’s responses. Unique colors help differentiate the conversation.

Next, setup your disconnect message to the visitor when the chat has ended. Pick a clear message to let them know to start a new chat if they require further conversation. The visitor can also end the chat, so set up their options for their visitor menu labels.

Photo 4


Prechat

Ask for an email and their question before they start a chat from a mobile device. This form will also double as the offline request form so that you can be sure not to miss anyone who has an inquiry for you. Customize your message and labels, set a Thank You message, and select your button colors for online and offline.

Photo 5

Once you have your look and feel defined, you are ready to rock and roll. If you have any questions on your mobile settings, please feel free to start a chat with us! Be sure to Save to keep any new changes in place!

Did you find this article helpful?

Not HelpfulNeeds WorkSo-soHelpfulVery Helpful (1 votes, average: 5.00 out of 5)
Loading ... Loading ...

Published September 23, 2015