Home > Style Guide
Categories: Design Studio
(Last Updated On: February 7, 2019)
In the Style tab of the Admin Dashboard, you are able to alter the appearance of your Live Chat, including language selection, chat box style, floating button selection (or choose to not have one), dynamic inline buttons, and other functionality choices as well.
With the Button Position you can:
- 1. Select which side of the browser the button sticks to.
- 2. Set up how far away from the top (or left) of the browser window should the button float.
- 3. Establish the offset (2) from be absolute (in pixels) or relative/fluid (in %).
By default, your Live Chat will be configured with a green floating “Chat” or “Help button which hovers at the edge of the browser window.
This button is “dynamic,” and will change between either the “help” button, or the “chat” button, depending on whether your chat widget is currently available, or not, to your site’s visitors. For chat to be live, an agent must be logged into the Conversations Hub and set as Available.
If you like the default button style, we have a number of color options for you to choose from. To change the color to another one, simply click on the image of the button, displaying a menu where you can choose the color. You can do this with the offline buttons as well.
- First, upload the images to your own website and get the URL where it is saved. The image will have to be embedded onto a website in order to establish a URL.
- Next, choose “Change image” and scroll to the bottom to where it says “Use Your Own Image”.
- Enter the full URL to the image in the “Your image URL” field.
- Click “Set Image”
- If the URL is correct, you should now see your new image in Style Tab.
- Hit “Save Changes” to apply your changes.
You can remove the “Chat” and/or “Help” floating button if you like. Just click “Change image” and choose “No image” at the bottom of the list.
The inline button has a unique code to install on your page and provides the same “dynamic” online/offline image-switching functionality of the floating button, but gives you more control over placement within your site, rather than floating at the edge of the browser. This way, you are able to put a chat link right in your sidebar.
Like the floating button, you can use one of our provided images, or your own. If you’d like to use your own images, please follow the directions above. To use your own dynamic inline button, click on the blue “Change Image” button and select Use Your Own Button” (same steps as using your own floating button).
Use the button to copy the little html snippet from the box. Then paste that code into your site, wherever you’d like the dynamic inline button to appear:
We also have several default Chat Box styles/colors to choose from!
In the Style tab, scroll to the “Select your chat box” and click on the image of the chat box. A menu will appear where you can select a different color or style. Select the box you want and save!
Want to use your very own Pre-Chat and Chat form? You are able to submit us your own designs and we will build them for you! For more info, check out the Look and Feel Customization Guide.
Published August 5, 2013