Skip to main content

LiveAgent Virtual Button Integration Guide

This guide provides step-by-step instructions for integrating the LiveAgent virtual button into your website or application, using the AI12Z LiveAgent service.

Overview​

The LiveAgent virtual button provides a seamless chat experience for your website visitors, allowing them to connect with support agents or AI-powered assistants directly from your site.

Service URL: https://example.liveagent.com

Step 1: Access Your LiveAgent Account​

  1. Navigate to https://example.liveagent.com
  2. Log in with your LiveAgent credentials
  3. You'll be taken to your LiveAgent dashboard

Step 2: Create a New Chat Button​

2.1 Navigate to Chat Button Configuration​

  1. In your LiveAgent panel, navigate to Configuration > Chat > Chat Buttons
  2. Click on the "Create" button

Chat Button Creation

2.2 Choose Button Type and Design​

In the pop-up window, choose the type of your chat button:

Available Options:

  • Pre-defined styles and designs: Select from ready-made templates
  • Custom type: Create your own button from:
    • Your own image upload
    • Custom HTML and CSS code

Note: The colors of pre-defined designs can be customized further in the chat button's settings.

Button Type Selection

2.3 Configure Basic Settings​

After selecting your button type, the configuration window will open automatically. In the Overview section, configure:

Essential Settings:

  • Name: Give your button a descriptive name (e.g., "Website Support Chat")
  • Department: Select the department that will handle chats from this button
  • Language: Choose the language to be used in the button
  • Active: Check this box to activate the button

Step 3: Generate Integration Code​

3.1 Access Integration Code​

  1. Open your chat button configuration
  2. Navigate to the Integration section
  3. Copy the integration JavaScript code provided

3.2 Understanding the Integration Code​

The integration code will look similar to this:

<!-- LiveAgent Chat Button Integration Code -->
<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.defer = true
    s.src = src
    s.onload = s.onreadystatechange = function () {
      var rs = this.readyState
      if (rs && rs != "complete" && rs != "loaded") return
      c(this)
      this.onload = this.onreadystatechange = null
    }
    t.parentNode.insertBefore(s, t)
  })(document, "https://example.liveagent.com/scripts/track.js", function (LA) {
    LA.init({
      license: "your-license-key",
      group: "your-group-id",
      visitor: {
        name: "",
        email: "",
      },
    })
  })
</script>
<!-- End LiveAgent Integration Code -->

Important: The actual license key and group ID will be automatically generated and included in your specific integration code.

Step 4: Portal Integration​

4.1 Basic Integration Steps​

  1. Copy the integration code from your LiveAgent chat button configuration
  2. Here we need to copy the track.js file link and group ID

4.2 Integration into Customer Portal​

  1. Login to the ai12z portal
  2. select the Agent and navigate it to the Webcontrols and ai12z bot component
  3. In the component settings, go to the Liveagent section
  4. Update the configs as a JSON object, for example:
{
  "liveagent": {
    "url": "https://example.liveagent.com",
    "buttonId": "your-button-id"
  }
}

If you want to add the chat button to your LiveAgent customer portal, follow the official guide for customer portal integration.

Integration Code Example

Integration Code Example Chat Button

Additional Features and Resources​

Technical Resources​

Support and Documentation​

For additional help and detailed configuration options:

This guide is based on the official LiveAgent documentation. For the most current information, always refer to the official LiveAgent support documentation.

Last updated: July 23, 2025