Embedding a Live Chat in your Website
Flow XO allows you to embed a Live Chat session in your website so that you can provide live chat service to your clients in a white label fashion, without them knowing about Flow XO. The main steps required to accomplish this are:
1. Create a Flow XO account for your client
2. Create a Flow XO user for your client, with a role of Agent
3. Use the Flow XO API to get an embedding token for your clients Agent user
4. In your website, include an iFrame that points to the Live Chat page in Flow XO, with some special query parameters that will allow you to automatically log the agent user into the Live Chat session using the token you obtained previously, as well as hide the menu so you can provide your own branding.
1. Create an account for your client
Live Chat embedding will only work if you create a separate Flow XO account for each of your clients. This is because the Live Chat feature of Flow XO allows access to all chats for a given account, and you do not want one client having access to the live chat sessions of another client.
2. Create one or more Flow XO team members in each client account of type Agent
For each client you can have as many different agent users as you like, so if your client has 5 live chat agents, you can add each agent as a Team Member in that clients Flow XO account: https://support.flowxo.com/article/282-team-members
3. Use the Flow XO API to get an embedding token for your clients Agent user
Flow XO provides an HTTP API endpoint that you can use to retrieve information about your team
Authorization
You must authorize all calls to the Flow XO API using an Authorization header in your HTTP request. The Flow XO API uses 'bearer token' authorization, so you will need to precede your API key with the word 'Bearer', like so:
Authorization: Bearer yOuRApIKeyGoEsHeRe
Note that if you are using Postman, and you use the Bearer Token feature, you will not need to manually add the word 'Bearer' as postman will do that for you: https://learning.postman.com/docs/sending-requests/authorization/#bearer-token
You can find your API key in your user profile (only the user with the Owner role will see the API key):
API Url
To use the Flow XO API, you will need to send HTTP requests to the following endpoint. The last part of the URL will depend on the method you are calling, but the base address is:
https://flowxo.com/api/team_members
Team Members
Listing all team members
You can retrieve a list of team members who you have enrolled in your account
GET https://flowxo.com/api/team_membersThe result will look like this:
{
"teamMembers": [
{
"_id": "abc123",
"provider": "local",
"family_name": "Boop",
"given_name": "Beep",
"unverified_email": "c@flowxo.com",
"email": "c@flowxo.com",
"user": "asdfasd",
"__v": 0,
"last_access": "2021-10-12T02:12:25.159Z",
"login_attempts": 0,
"created_at": "2021-08-08T00:10:02.415Z",
"google": {
"photos": [],
"emails": []
},
"facebook": {
"photos": [],
"emails": []
},
"role": "Agent",
"timezone": "UTC",
"email_verified": false,
"isMe": false
},
{
"_id": "abcdef",
"user": "asdfasd",
"email": "nathan@sunfish.io",
"provider": "local",
"given_name": "Nathan",
"family_name": "Stults",
"__v": 0,
"last_access": "2021-10-12T02:44:44.223Z",
"login_attempts": 0,
"created_at": "2019-09-09T13:25:28.079Z",
"google": {
"photos": [],
"emails": []
},
"facebook": {
"photos": [],
"emails": []
},
"role": "Owner",
"timezone": "America/Los_Angeles",
"email_verified": true,
"isMe": true
}
]
}
Here's what the request would be using cURL:
curl --location --request GET 'https://flowxo.com/api/team_members' \ --header 'Authorization: Bearer YOURAPIKEY'
Retrieving an embedding token for embedding a live chat session for this user in your website
Once you have the id of the team member you want to embed, you can get an authorization token for that team member that you can use to create a live chat session in your website for that agent:
API Url:PUT https://api.flowxo.com/api/team_members/{teamMemberId}/token
Getting team data using cURL
curl --location --request GET 'https://flowxo.com/api/team_members/YOUR_TEAM_MEMBER_ID/token' \ --header 'Authorization: Bearer YOURAPIKEY'
This will return a result that looks like this
{
"token": "YOUR_TEAM_MEMBER_TOKEN"
}
NOTE: The team member ID is the value in the "_id" field of each team member from the team_members API endpoint. If your client will have multiple agents, you will need to use this method to get a token for EACH agent.
Once you have retrieved an embedding token for the agent you will need to store it in the user record of your application, because you will need to include it on the page where you embed the Flow XO live chat. Each user logged into your application's back office application will have a different Flow XO embedding token.
4. Embed an iFrame in your website pointing to the Flow XO Live Chat embedding url.
The last step is simply to include an iFrame on your website that has its "src" attribute set to the Flow XO Live Chat embedding URL. The URL looks like this:
https://flowxo.com/app/livechat?c_am&_hideLogo=true&&_hideNav=true&_token={{CURRENT_USER_FLOWXO_EMBEDDING_TOKEN}}}
For example, lets say that Joe is a client of yours and is logged into your application, and needs to access Live Chat for his company. When he navigates to the Live Chat page on your site, you will generate some HTML that looks something like this:
<html>
<head> </head>
<body>
My Company Branding & Logo Go Here
<hr/>
<iframe
width="1000"
height="1000"
src="https://flowxo.com/app/livechat?c_am&_hideLogo=true&&_hideNav=true&_token={{JOES_FLOWXO_EMBEDDING_TOKEN}}"
></iframe>
</body>
</html>
The end result should look something like this:
And that's it! Let us know if you have any questions or difficulties implementing this feature.