You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.
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.

Should I include chat in my promotional emails and newsletters?

Definitely yes. Different people prefer different means of contacting customer service. Some would easily choose phone, but there are many of those who hate this type of communication and avoid it as much as they can. They would rather opt for chat as a faster alternative to emails and less nerve-wracking one to phone conversations. They would be able to re-read messages as many times as they need without having to re-ask the operator multiple times, take time to ponder over them before answering, control the pace of communication, and save the whole conversation for further reference. Operators on their end would have more options to interact with the customer - send and receive links, images, documents. Chat option won't take a lot of space in your emails or social media pages all while it would definitely improve the overall customer experience.

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.

Chat link in a plain text email

The only option is to insert a direct chat link as text or using markdown syntax to make it stand out from the rest of the text. Some email services and programs will automatically recognize text that starts with https:// or www as hyperlink and make it clickable in the email message.

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.

QR code for printable materials

Provide Support chat link is not limited to websites, social media or emails, it can be printed out in the form of QR code on your prospects, brochures, business cards, wrappings, user manuals, in magazines where you are featuring, etc., allowing your customers to instantly contact you in chat via a smartphone.

The QR code is unique per account, you cannot alter it or generate another one for a link with additional parameters. Find the code at Chat Button Codes > Direct Link to Your Chat Window / QR code in your Provide Support account. Personalize it with your company logo (supports images in .png, .jpg, .bmp, .gif, .svg or .webp format), it will be automatically resized and positioned in the center. Once finished, download the QR code image to your computer.

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.

+1-888-777-9930