To integrate Universal Chat to your web page you should make the following steps:
- Setup a brand. In Universal Chat Settings you can customize how the universal chat behaves and looks.
- Include integration code into your web page. Use the code that you get form Universal Chat Settings and paste it into your web page to show the web chat to the customer.
- Pass customer ID to the chat. This is optional but highly recommended as it enables to link the customer to their data.
Setup a Brand
You can setup a Universal Chat brand directly in Salted CX app. The brand enables you to customize behavior and look of the chat. You can setup multiple brands to provide different customer experience for different segment of your customers.
Include Code in Page
Copy the integration code for the brand of your choice from Universal Chat Settings and paste into into your web page.
Make sure you list your website domain in the allowed domains sections of the settings. The brand can only be embedded into the domains you list there.
Pass Customer Data to Chat
Passing a customer data enables to link the chat session to a specific customer. This enables Your Logic and human agents to access the customer data. Salted CX requires that you digitally sign the data in a save environment (server side) so the bad actor cannot impersonate somebody else. Salted CX verifies the data on server side as well.
Data Format
You need to provide the data in a format supported by Universal Chat. The data are in JSON format.
Properties in the customer daya:
| Property | Type | Description |
|---|---|---|
contact | Contact Object | The contact this chat session is associated with. This can be either an internal customer ID or some global identifier such as email. |
displayName | String | Name of the customer that agents will see. This name SHOULD not contain protected personal information. We recommend using the first name. |
relatedContacts | Array of Contacts | The list of related contacts to the customer. These contacts enable to link the customer to other conversations in the customer journey. So if you have a past conversations in other channels you will see them in the customer journey with the current Universal Chat session. |
Contact Object
| Property | Type | Description |
|---|---|---|
type | String | Type of the contact. Use Email and Phone value for emails and phones. You can use other values to distinguish the contact type. |
externalId | String | The actual contact information — ID, phone, email, value. |
{
"customer": {
"contact": {
"type": "Customer ID",
"externalId": "9e065dd3-14e2-4c67-832c-03b320be65c1"
},
"displayName": "Carmen",
"relatedContacts": [
{
"type": "Email",
"externalId": "carmen.sanchez@email.com"
},
{
"type": "Phone",
"externalId": "+420123456789"
}
]
}
}
Create a JWT token
To pass data to Salted CX you need to create a JWT token that contains the customer data, expiration time and signature.
- Generate a private and public key pair.
- Store your private key in your secrets manager where your server code can access it.
- Paste your public key for signing the requests. Go to Universal Chat settings and paste the value Customer Data Signature Key.
Once you have encryption keys setup you need to implement creation of JWT token with the desired payload.
Pass Customer Data via JavaScript
You need to have the JWT token available on the client side (browser) to pass to Salted CX. The exact way how to make it available depends on the tech stack that you are using. Your JavaScript code can retrieve it using AJAX, it can retrieve it from the cookies or local storage or use any other method that works in your environment.
Once you have the JWT token available in the browser you can pass them to Salted from the browser.
SaltedCX.updateCustomer(jwtToken);