<main>
<article class="userContent">
<p>This usecase describes example steps of the configuration and API usage which are needed to integrate the Chat (optionally Co-Browsing) functionality into a third party system.</p><h2 data-id="glossary">Glossary</h2><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">Customer</code> is a user who writes a message through the chat.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">User/Agent</code> is the user/agent who answers the chat.</li></ul><h2 data-id="1.-setup-and-script-implementation">1. Setup and Script Implementation</h2><h4 data-id="plugin-configuration">Plugin configuration</h4><p>Activate and configure your WebChat plugin.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">Color</code></li><li><code class="code codeInline" spellcheck="false" tabindex="0">Texts</code></li><li><code class="code codeInline" spellcheck="false" tabindex="0">Appearence</code></li><li><code class="code codeInline" spellcheck="false" tabindex="0">...</code></li></ul><p><a href="https://docs.chatvisor.com/docs/config05_css_live-chat" rel="nofollow noreferrer ugc">Go to configration.</a></p><h4 data-id="javascript-integration">JavaScript integration</h4><p>The JavaScript has to be integrated in each webpage where we want to cobrowse.</p><p><a href="https://docs.chatvisor.com/docs/setup20_implementation-javascript" rel="nofollow noreferrer ugc">Learn how to implement the Chat on your page.</a></p><h2 data-id="2.-control-the-visibility-of-the-chat">2. Control the visibility of the chat</h2><p>📌<strong>Note</strong>: If nothing is configured, the chat is visible per default.</p><p>You can set your individual Action Rules to control the visibility of the chat:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">Any agent is online</code></li><li><code class="code codeInline" spellcheck="false" tabindex="0">Any agent is available</code></li><li><code class="code codeInline" spellcheck="false" tabindex="0">Opening hours</code></li><li><code class="code codeInline" spellcheck="false" tabindex="0">Visitor is on page for x seconds</code></li><li><code class="code codeInline" spellcheck="false" tabindex="0">Visitor visits page for second time</code></li></ul><p>or you can control it via the REST API.</p><p><a href="https://developers.chatvisor.com/#operation/setVisibleUsingPOST" rel="nofollow noreferrer ugc">REST API to set the visibilty of the chat</a></p><p>📌<strong>Note</strong>: REST API and Actions Rules can also be combined</p><h2 data-id="3.-synchronize-your-agents">3. Synchronize your agents</h2><p>If you are using a third party environment to manage your agents you can simply synchronize the agent accounts with Chatvisor over our REST API.</p><p><a href="https://developers.chatvisor.com/#tag/User" rel="nofollow noreferrer ugc">REST API to synchronize your agents</a></p><h2 data-id="4.-tag-your-customers-to-match-it-with-your-internal-ids">4. Tag your customers to match it with your internal IDs</h2><p>Sometimes there is the case that you want to reidentify your customers and want to extend them with additional information. Therefore</p><p><a href="https://developers.chatvisor.com/#operation/tagUserUsingPOST" rel="nofollow noreferrer ugc">REST API to tag your customers</a></p><pre class="code codeBlock" spellcheck="false" tabindex="0">{
"email": "john.doe@example.com",
"firstname": "John",
"id": 123,
"labels": [
"foo",
"bar"
],
"lastname": "Doe"
}
</pre><h2 data-id="5.-receive-new-conversationsmessages">5. Receive new conversations/messages</h2><h3 data-id="webhooks">WebHooks</h3><p>WebHooks can be configured at <code class="code codeInline" spellcheck="false" tabindex="0">Settings - API - WebHooks</code>. You receive a webhook when a new conversation is started or a new message is received. If no automatic routing rules are configured in Chatvisor you can manually route the conversation to one of your agents and generate a public URL to join the conversation.</p><p><a href="https://developers.chatvisor.com/#section/WebHooks" rel="nofollow noreferrer ugc">Go to configration.</a></p><h3 data-id="rest-api">REST API</h3><p>You can also poll the conversations via the REST API.</p><p><a href="https://developers.chatvisor.com/#operation/getConversationsUsingGET" rel="nofollow noreferrer ugc">Go to documentation</a></p><h2 data-id="6.-generate-a-public-chat-url-for-the-agent">6. Generate a public chat URL for the agent</h2><p>After the conversation/customer is successfully created, it is possible to generate a public URL to join the conversation. For this we need the [<code class="code codeInline" spellcheck="false" tabindex="0">customerId</code>] what we've received from the <code class="code codeInline" spellcheck="false" tabindex="0">WebHook</code> or the <code class="code codeInline" spellcheck="false" tabindex="0">Conversation API</code>.</p><p>📌<strong>Note</strong>: Authenticate and generate an API token <a href="https://developers.chatvisor.com/#section/Authentication" rel="nofollow noreferrer ugc">Go to documentation</a></p><p><a href="https://developers.chatvisor.com/#operation/getUrlOfChatByCustomerIdUsingGET" rel="nofollow noreferrer ugc">REST API to generate a public agent chat URL</a></p><p>📌<strong>Note</strong>: This is a unique URL where the agent is automatically logged in and redirected to the given chat.</p><h2 data-id="7.-optionally-intregrate-additionally-co-browsing">7. Optionally intregrate additionally Co-Browsing</h2><p>You only have to enable the Co-Browsing plugin and configure it. Then it will be automatically integrated within the Live Chat.</p><p><a href="https://docs.chatvisor.com/docs/config04_css_live-view" rel="nofollow noreferrer ugc">Go to configration.</a></p>
</article>
</main>