Advanced contact / chat widgets integration

Normally LiveAgent chat buttons are displayed on a website when there is at least 1 agent available on chat in the department for which the button is created. When there is no one available the button is either hidden or a contact us button which opens a contact form is displayed. This default behavior is usually enough but for larger traffic websites it might be a good idea to hide the button outside of business hours even when agents are still online on chats. For example you did not allow th...

Angular applications are typically written in TypeScript. Below is a simple example of Angular 8 component that creates a button. Note that in your TypeScript component you need to declare a variable with exact name 'LiveAgent' (mind the capital L) to be able to use a global variable defined in track.js with the same name. contact.component.html ... <div id="chatButton"></div> ... contact.component.ts import { Component, OnInit } from '@angular/core'; declare var LiveAgent: any;...

If you wish to design your own button from scratch and you'd like it to include a section (bubble) which should be hidden when an X element is clicked you can extend this simple example with your design: <div style="bottom: 30px; left: 10%; z-index: 999997; position: fixed;"> <div style="background:red; padding:30px; position:relative;"> This is bubble with close button. <div onclick="(event.target || event.srcElement).parentNode.parentNode.style.display = 'none'; if (event.stop...

If you wish to set up chat buttons to display on mobiles exactly as they display on regular desktop PCs then all you need to do is edit your chat button in your LiveAgent(admin panel>configuration>chat>chat buttons) and on the first tab "Overview" enable option "Force desktop mode on mobiles" and save the changes.

Sometimes you need "refresh" chat button without page reloading, for example in case of using angularJS or dynamic language switching. Use button integration code without `LiveAgent.createButton`, so your code will look like: <script type="text/javascript"> (function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded'...

A customer of ours requested a contact form which would open in a modal window when an inline text in his website navigation was clicked. So instead of navigating the customer to your Contact us page by clicking you can directly open the contact form in a modal window over the content of the page the customer is currently visiting. There is one aspect to keep in mind before you decide that you would like to use this implementation and it is the fact that there will be no online visitors trackin...

Sometimes you may need to pass some additional information to the chat or contact form that will be displayed to an agent (https://www.liveagent.com/features/agents/). For example, it can be cart id of customer shopping cart. If an agent can see this cart id he can check what is in customer's cart. Adding note to chat / contact form 1. locate integration code of your chat or contact us button. it should look like this: <script type="text/javascript"> (function(d, src, c) { var t=d....

Table of content - Use elements on your website to start a chat or contact form (#elements) - Start a chat or open a pre-chat form automatically when website is loaded (#start auto) - Display contact widgets ONLY on specific page (#display) - Do NOT display contact widgets on specific pages (#don) Do not forget to change the URL of your LiveAgent and button IDs in the below code examples. Use elements on your website to start a chat or contact form In case you do not wan...

Google Tag Manager allows you to quickly and easily update: - Tags and code snippets on your website, such as those intended for traffic analysis and marketing optimization. - Configuration and flag values of mobile apps that you have created. What is a tag? A tag is a snippet of JavaScript that sends information to a third party, such as Google. If you don't use a tag management solution such as Google Tag Manager, you need to add these snippets of code directly to files on your ...

When your chat button (https://www.liveagent.com/features/real-time-chat/) or contact form is integrated within your CMS you usually already know the e-mail address and name of your customer so you do not need to ask for it in a contact form. You can prefill both the e-mail address, name or phone of the customer or any custom value by adding some special code to your widget code. Since version 5.17 prefill methods logic has been changed and new method has been added. More info here: https://...