WebChat API - Example - TeamViewer Support
<main> <article class="userContent"> <p>This usecase describes an example implementation of several WebChat SDK Methods.</p><p>The example features a 'Help' button on the website, which if clicked opens the webchat and triggers a specific Flow.</p><h2 data-id="1.-create-the-flow-which-will-be-sent-to-the-user.">1. Create the Flow which will be sent to the user.</h2><p>This guide assumes you have already created a Flow according to your wishes.</p><p>As an example, we have a very simple Flow here which asks the user to confirm if they want help. If they do, the Flow assigns them to an agent.</p><p>To learn how to build your own Flow, please refer to <a href="https://docs.chatvisor.com/docs/config06_css_flows" rel="nofollow noreferrer ugc">this article</a>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://docs.chatvisor.com/img/jsapi07-usecase-webchatapi/Flow.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/jsapi07-usecase-webchatapi/Flow.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>While the Flow editor is open, copy the <code class="code codeInline" spellcheck="false" tabindex="0">Flow ID</code> for later use. The <code class="code codeInline" spellcheck="false" tabindex="0">Flow ID</code> can be found in the url: <a href="https://app.chatvisor.com/#/entities/flows/show/<FLOWID>" rel="nofollow noreferrer ugc"><code class="code codeInline" spellcheck="false" tabindex="0">https://app.chatvisor.com/#/entities/flows/show/<FLOWID></code></a>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://docs.chatvisor.com/img/jsapi07-usecase-webchatapi/flowurl.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/jsapi07-usecase-webchatapi/flowurl.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>In this example, our <code class="code codeInline" spellcheck="false" tabindex="0">Flow ID</code> is <code class="code codeInline" spellcheck="false" tabindex="0">5f17ecec3564c64604a1cc4b</code>.</p><h2 data-id="2.-implement-the-sdk-methods-on-your-website">2. Implement the SDK methods on your website</h2><p>First we need to implement the 'Open Chat' and 'Trigger Flow' API Methods on the website. Their documentation can be found <a href="https://docs.chatvisor.com/docs/jsapi03-webchat" rel="nofollow noreferrer ugc">here</a>.</p><h3 data-id="html">HTML</h3><p>Here we create the button which will open the chat window and trigger a flow.</p><pre class="code codeBlock" spellcheck="false" tabindex="0"> <button onclick="getHelp()">Need help?</button> </pre><h3 data-id="javascript">JavaScript</h3><p>This is where we implement the SDK methods.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">/** * open webchat and trigger 'Customer Help' flow */ function getHelp() { CV.webchat.open(); CV.webchat.triggerFlow("5f17ecec3564c64604a1cc4b"); } </pre><p>This will open the WebChat window and trigger a Flow, giving the customer a quick way to get in touch with an agent if needed.</p><p>Documentation on <code class="code codeInline" spellcheck="false" tabindex="0">CV.webchat.open()</code> and <code class="code codeInline" spellcheck="false" tabindex="0">CV.webchat.triggerFlow()</code> can be found <a href="https://docs.chatvisor.com/docs/jsapi03-webchat" rel="nofollow noreferrer ugc">here</a>.</p><h2 data-id="3.-check-result">3. Check Result</h2><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://docs.chatvisor.com/img/jsapi07-usecase-webchatapi/needHelpBtn.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/jsapi07-usecase-webchatapi/needHelpBtn.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>If the user now clicks this button on the website, the chat will open and display the Flow like this:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://docs.chatvisor.com/img/jsapi07-usecase-webchatapi/chatWithFlow.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/jsapi07-usecase-webchatapi/chatWithFlow.png" alt="alt-text" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p></p><p><br></p><h2 data-id="other-possible-cases">Other possible cases</h2><p>This usecase only uses 'Open Chat' and 'Trigger Flow', but there are also 'Show/Hide Chat' methods which enable you to completely hide or show the chat button.</p><p>With this, and Flows or ActionRules many more use cases are possible.</p><ul><li>Only show WebChat once the user has scrolled to a certain point on the page (JS, 'Open Chat' API)</li><li>If the customer clicks a 'Help' button, respond with a message, tag the customer, assign them to a specific team and ask them for their contact information (JS, 'Trigger Flow' API, Flow with 'route to' and 'user input' elements)</li><li>Only enable WebChat based on user information like desktop/mobile, language, referring website or search engine (JS, 'Show Chat' API)</li><li>Enable WebChat after user accepts your cookies (JS, 'Open Chat' API)</li><li>Have a button on your website which opens chat,</li></ul><p><br></p> </article> </main>
