Skip to main content

Setting up a live chat

Tomek Kaszuba avatar
Written by Tomek Kaszuba
Updated over a week ago

Please note that the Account Owner or Admin access level is required to complete this setup

Navigate to settings>Organization>Live chat

  • Click the "set up live chat" button

The first screen here is the customization section. It is divided between several sections.

Appearance

Here you can pick the chat's primary color, chat button position on the screen and adjust spacing.

Spaces

Spaces allows you to edit the home screen of the chat and the chat space itself

Home space & Chat space

These allow you to further customize these previously mentioned parts of the chat

Privacy Settings

Inform visitors about data usage and collect their consent before they start a chat. This helps ensure compliance with privacy laws like GDPR.

Contact details

Here you can enable the chat to collect contact details so you can continue the conversation via email - even if the visitor leaves the chat. If you do not pick any identification options the user will be identified as "Guest" in the chat.

Other options include editing the welcome message, the "Start chat" button and "name" and "email" labels.

  • After customizing click the "Save Live Chat" button at the bottom of the screen and "Back to Live Chat" at the top

Now this screen should show an Installation Gude to help you embed the chat on any of your websites. To embed your widget on your website, you have two options:

1) Random users (with or without name/email) - simply copy the first script (using the Copy code button) and insert it before the closing </body> tag in your HTML code.

2) You can identify your organizationʼs users by passing their name and email in the script settings object along with a valid userHash. We provide a hashing function that can be used in Node.js to generate the userHash on the server. Itʼs important not to expose your secret key, which is why this should not be done directly in the browser. You can copy the key by clicking the Secret key button in the top-right corner of the screen and use it in the hashing function (the email must also be provided). This will allow you to identify users in your organization.

Hashing functions

The example above demonstrates how to use the crypto library in Node.js.

Then your final script for identified users should look similar to the one below:

<!-- Start of Live Chat code --> 
<script>
(function ()
{ window.MyLiveChatSettings = {
appId: "68dcf462e330aad4b2d98c15",
widgetId: "68dcf462e330aad4b2d98c15",
widgetVisible: true,
name: "John Doe",
email: "john.doe@example.com",
userHash: "237776b29ce0c46a3fb116bec010521b94b783ca2ff9b6e293245011f85f283" };

var liveChat = document.createElement('script');
liveChat.src = 'https://inbox.elasticemail.com/scripts/chat.js'; liveChat.async = true; document.head.appendChild(liveChat); })(); </script>
<!-- End of Live Chat code -->

Generating user_hash

This section provides instructions on how to generate a user_hash for organization member recognition. Pick your preferred programming language and collapse it to see a code snippet to use.

NodeJS

import { createHmac } from 'crypto';

const secretKey = 'your-secret-key';
const userEmail = 'user@example.com';

const userHash = createHmac('sha256', secretKey)
.update(userEmail)
.digest('hex');

console.log(userHash);

PHP

<?php
$secretKey = 'your-secret-key';
$userEmail = 'user@example.com';

$userHash = hash_hmac('sha256', $userEmail, $secretKey);
echo $userHash;
?>

C#

using System;
using System.Security.Cryptography;
using System.Text;

string secretKey = "your-secret-key";
string userEmail = "user@example.com";

using (var hmac = new HMACSHA256(Encoding.UTF8.GetBytes(secretKey)))
{
byte[] hashBytes = hmac.ComputeHash(Encoding.UTF8.GetBytes(userEmail));
string userHash = BitConverter.ToString(hashBytes).Replace("-", "").ToLower();
Console.WriteLine(userHash);
}

C++

#include <iostream>
#include <iomanip>
#include <sstream>
#include <openssl/hmac.h>

int main() {
std::string secretKey = "your-secret-key";
std::string userEmail = "user@example.com";

unsigned char hash[EVP_MAX_MD_SIZE];
unsigned int hashLen;

HMAC(EVP_sha256(),
secretKey.c_str(), secretKey.length(),
(unsigned char*)userEmail.c_str(), userEmail.length(),
hash, &hashLen);

std::stringstream ss;
for(unsigned int i = 0; i < hashLen; i++) {
ss << std::hex << std::setw(2) << std::setfill('0') << (int)hash[i];
}

std::cout << ss.str() << std::endl;
return 0;
}

GO

package main

import (
"crypto/hmac"
"crypto/sha256"
"encoding/hex"
"fmt"
)

func main() {
secretKey := "your-secret-key"
userEmail := "user@example.com"

h := hmac.New(sha256.New, []byte(secretKey))
h.Write([]byte(userEmail))
userHash := hex.EncodeToString(h.Sum(nil))

fmt.Println(userHash)
}

Rust (Note: Requires dependencies in `Cargo.toml`)

[dependencies] hmac = "0.12" sha2 = "0.10" hex = "0.4" ```  ```rust use hmac::{Hmac, Mac}; use sha2::Sha256;  type HmacSha256 = Hmac<Sha256>;  fn main() {     let secret_key = b"your-secret-key";     let user_email = b"user@example.com";      let mut mac = HmacSha256::new_from_slice(secret_key)         .expect("HMAC can take key of any size");     mac.update(user_email);      let result = mac.finalize();     let user_hash = hex::encode(result.into_bytes());      println!("{}", user_hash); }

Python 3.x

import hmac
import hashlib

secret_key = 'your-secret-key'
user_email = 'user@example.com'

user_hash = hmac.new(
secret_key.encode('utf-8'),
user_email.encode('utf-8'),
hashlib.sha256
).hexdigest()

print(user_hash)

Ruby

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;

public class HmacExample {
public static void main(String[] args) throws Exception {
String secretKey = "your-secret-key";
String userEmail = "user@example.com";

Mac sha256Hmac = Mac.getInstance("HmacSHA256");
SecretKeySpec secretKeySpec = new SecretKeySpec(
secretKey.getBytes(StandardCharsets.UTF_8),
"HmacSHA256"
);
sha256Hmac.init(secretKeySpec);

byte[] hashBytes = sha256Hmac.doFinal(userEmail.getBytes(StandardCharsets.UTF_8));

StringBuilder userHash = new StringBuilder();
for (byte b : hashBytes) {
userHash.append(String.format("%02x", b));
}

System.out.println(userHash.toString());
}
}

JAVA

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;

public class HmacExample {
public static void main(String[] args) throws Exception {
String secretKey = "your-secret-key";
String userEmail = "user@example.com";

Mac sha256Hmac = Mac.getInstance("HmacSHA256");
SecretKeySpec secretKeySpec = new SecretKeySpec(
secretKey.getBytes(StandardCharsets.UTF_8),
"HmacSHA256"
);
sha256Hmac.init(secretKeySpec);

byte[] hashBytes = sha256Hmac.doFinal(userEmail.getBytes(StandardCharsets.UTF_8));

StringBuilder userHash = new StringBuilder();
for (byte b : hashBytes) {
userHash.append(String.format("%02x", b));
}

System.out.println(userHash.toString());
}
}

Did this answer your question?