Advanced contact / chat widgets integration

Home > Technical Support > Integrations and plugins > Advanced contact / chat widgets integration

Automatically enable/disable chat button during business hours

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...

Integrate button into Angular application

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;...

Custom button with hideable section

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...

Embedded chat window for mobile devices

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.

Change button on demand without page reload

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'...

Contact form in custom modal window

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...

Add note to chat or contact form

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....

Advanced widgets integrations

Quick navigation - Using elements on the website to call a widget (#elements) - Starting a chat/opening a pre-chat form automatically when the website is loaded (#auto_start) - Display contact widgets ONLY on specific pages (#display) - Do NOT display contact widgets on specific pages (#not_display) - Display chat button only to customers from a specific country (#country) Do not forget to change the URL of your LiveAgent and the button ID in the below code examples. Using e...

Add chat button to Google Tag Manager

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 ...

Prefill email and name for customer

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://...

LiveAgent Web Contact Cards

Introduction LiveAgent Web Contact Cards provide a convenient way to access and interact with contact information on the web. By hovering over embedded email addresses and phone numbers, you can view CRM data and related tickets associated with the contact. In this article, we'll explore the three integration methods for using LiveAgent Web Contact Cards and their benefits. Integration Methods for LiveAgent Web Contact Cards Choose one of the following three methods to start using Live...