📄️ HTML/JavaScript code snippet
Your personal account HTML/JavaScript code snippet can be found in the Live Chat widget Integration page on the Console.
📄️ WordPress integration
For the WordPress integration, please install SignalZen plugin to your WordPress website.
📄️ Drupal integration
For the Drupal integration, please install SignalZen module to your Drupal website.
📄️ Joomla integration
For the Drupal integration, please install SignalZen extension to your Joomla website.
📄️ Single Page Applications (SAP)
In order to install the widget to a Single Page Application such as written in ReactJS, Vue or EmberJS, you will need to use only the JavaScript code.
📄️ Metadata about visitor
If you have some context data that you want to see when a chat session is started (Full visitor info) on the Console, Slack, MS Teams or mobile apps, you can add that data to your integration code.
📄️ Invisibility and show on click
Depending on your needs, you can start the widget in invisibility mode, which means that all the widget will be hidden until the point you decide differently. See the code example on the right how to start the widget invisible.
📄️ Language
Usually by creating translations of the widget, we determine the language that the visitors see by their browser settings. There is an alternative way for this purpose, you can set the language by the integration code which takes precedence over the browser language. See the code example below how to do that.
📄️ Embedding Chat box in a div
There might be cases, when you want to embed the live chat box directly in a desired div element. We support this need by renderInContainerId attribute.
📄️ CSS for trigger button
Sometimes you may want to change the widget trigger button CSS. You can do that by using #signalzenwidget_root a CSS selector.
📄️ Expand and Suspend
The JavaScript command SignalZen.expand() will open the widget chat window instead of showing just the chat circle with the chat icon. The command SignalZen.suspend() will minimise the chat window to display only chat circle with the chat icon.
📄️ Events
We support multiple events that come with metadata about each of them. This could be used for an advanced integration if you want to know in your JavaScript implementation when the chat is opened, a message is received or sent. Let's start with the events list and wrap up with a single example how to catch an event.