How to integrate live chat with emails

A great number of people nowadays have the Internet tightly integrated into their everyday lives. They register accounts on online shops and services using emails. This also allows them to subscribe to newsletters of their favorite manufacturers and service providers and get updates, notifications about special offers and discounts, new products and recommendations. Which in its turn gives the companies/business owners an opportunity to actively promote their products, gain customers' trust and create strong relationships with them. This means among other things, an ability to stay in touch with customers and give them various ways to contact you back at any convenient time.

Creating a chat button for your HTML email template/signature

Depending on the recipient's email program and device, users will receive emails in HTML formatting or in plain text with no formatting. Since you cannot control it, you most probably would need to design both HTML and plain text templates for your emails and allow users to choose between them. HTML emails are normally sent along with the plain text versions, so you will want the text-only emails to look as good and professional as possible in case they are all the recipients see on their end. Please also bear in mind that the majority - if not all - of the email programs and services don't support scripts, so even those customers who get your emails in HTML format won't be able to see there the standard chat button that you may have added to your website with no problems. Your choice would be simplified HTML code with link to your chat and image as a button, or a chat link with basic inline CSS to make it look as a button.

We will assume that you have your HTML email template or signature ready and have decided on the place for the chat button. To get the code for it, do the following:

1. Login to your account at https://www.providesupport.com/login and click "Chat Button Codes" on the left-side panel. Find the code called "Chat Button or Link for Emails".
2. You will need to agree that you won't use the chat link in emails known as SPAM nor send them out in bulk to people without their prior consent. Please make sure you ask your customers before sending them newsletters.
3. Next, you will see 2 text areas; the code from the second one is what you need.

Live chat button with status-driven icon

Added as it is, the code will connect to the icons set in your Provide Support account (Account Settings > Images > Chat Icon) and will show the icon that corresponds to your chat status at the moment of email message loading. However, it won't change icons dynamically, so if your chat service is not online 24/7 and switches from online to offline while the customer still reads your email, upon clicking the online button they may load the offline chat form. Additionally, some email services (e.g. Gmail) may not be able to get the status-driven chat icon from Provide Support server. If this is something you would like to avoid, consider one of the other two versions of the button.

Live chat button with static icon

Instead of the icon set you can use a static icon hosted on your server. Simply replace the URL of the src attribute in the code with the full path to your chat icon. See example:

<!-- BEGIN ProvideSupport.com Chat Button Code for Emails -->
<a href="https://vm.providesupport.com/your-account-name-or-hash" target="_blank">
  <img src="https://mywebsite.com/folder-with-images/chaticon.png" style="border:0px"
    alt="Live chat" title="Click to chat"/>
</a>
<!-- END ProvideSupport.com Chat Button Code for Emails -->

CSS button

Lastly, based on this code you can create a CSS button for your chat, much lighter than an image and commonly used by companies in newsletters. Here are initial steps that should be followed to get the code that you will work with further, with a very basic button as an example:

1. Delete the <img> element from the code and replace it with text:
   <a href="https://vm.providesupport.com/your-account-name-or-hash" target="_blank">Live Chat</a>
   It creates a plain hypertext link, not very attractive, but it can be used among other links.
2. Wrap the code with generic tags <span> or <div>. For our example we will use <span>:
   <span><a href="https://vm.providesupport.com/your-account-name-or-hash" target="_blank">Live Chat</a></span>
   The wrapper will allow us to style the text link into a nice button.
3. Add style to the text link and the wrapper. Let's start with the text link. We will remove the default blue underline, center text inside the wrapper by adding "padding" property (there are other ways that can be used instead of "padding" though), adjust font style, add color, and make the whole button clickable:
   <span><a href="https://vm.providesupport.com/your-account-name-or-hash" target="_blank"
    style="display:inline-block; text-decoration:none; padding:8px 16px; color:#ffffff; font-family:Arial,Verdana,sans-serif;">Live Chat</a></span>
   
4. Now the wrapper. We will add display:inline-block here too to shape the button, set background color to make it visible, and add rounded corners.
   <span style="display:inline-block; background-color:#00a046; border-radius:4px;">
  <a href="https://vm.providesupport.com/your-account-name-or-hash" target="_blank"
    style="display:inline-block; text-decoration:none; padding:8px 16px; color:#ffffff; font-family:Arial,Verdana,sans-serif;" >Live Chat</a>
</span>
   Add other style properties, alter the existing ones, try different values until you're happy with the result. Once done, copy the code and insert it to its place in your HTML email template or signature.

Passing additional parameters in the chat link

Direct chat links can be extended with parameters (query strings) - slight but rather useful addition to the data collected through pre-chat form and provided by users' browsers. There is no specific list of predefined parameters (except for just a couple), they can be anything you want to get from the chat link and pass to your support operators. For example, they can be used as tokens to indicate that the chat comes from an email or be more specific per email or per campaign. Values of the parameters are saved in chat transcripts along with other visitor details which can be parsed and gathered into your databases for further analysis.

The basic syntax of parameters in chat links is the same as for all query strings in URLs and looks like this:

https://vm.providesupport.com/your-account-name-or-hash?parameter1=value1&parameter2=value2...&parameterN=valueN

No spaces or quotation marks are allowed. If you require more than one word for parameters or values, use %20> in between.

Information after ? will be displayed in the Visitor Details sidebar of an active chat session with the user in the live chat app, as well as in the Visitor Details section at the bottom of the chat transcript. Parameters with their values go after the last pre-chat form field entry and before the data automatically passed by our system and user's browser.

You can add a semicolon : right after each parameter name to make it look the same as pre-chat form titles:
https://vm.providesupport.com/your-account-name-or-hash?Chat%20Source:[email protected]

And this is how it will look in Visitor Details:
Chat Source:[email protected]

As mentioned before, there are a couple of predefined parameters, they support only URL addresses and won't benefit much in chat links in emails. We will list them here just for you reference, it's up to you to decide whether to add them or not:

• ps_l=URL - Replaces the "Called From" parameter that shows URL of the page the chat was initiated from. Normally, this parameter is automatically passed through the links by our system, but it happens that you might not see it in the live chat app if a user initiates a chat from an email.
• ps_r=URL - Replaces referrer. In our system, a referrer is a page (of the current or any other website) from which the user came to the page with the chat button code or from which they called to chat. In direct chat links, however, it is not passed correctly.

Basically, these parameters are identical if applied manually. They can pass a certain URL. There might be only a situation or two when you can make use of them: say, in case a company runs several websites and several email campaigns accordingly and wants to monitor which website a particular email relates to.

Please keep in mind that live chat is a quite powerful customer support tool. If handled poorly, it may ruin your reputation. Strive to always meet your customers' needs and leave the best possible impression on them while handling their problems. In no time it will help you to turn them into your devoted fans and promoters who will happily spread the word about you and bring you even more customers.