Web Client Deployment Examples with Embed Code

If you want to deploy one of our webclients for easy access for you employees to live chat you will need a few things to get started. You will need to have a link or button for them to launch out to the live chat, and also need the url for the chat service. In this page we will provide some explanations and examples of launch options and how to point to your webclient option.

Simplest Example: Open webclient in new browser

Simple button on the side of your web page, opens chat in a new window

Click for Support

Round chat icon button that opens a web client in a new window with a simple theme

Button that slides in from off screen with some animation and styling. It opens an embedded version of the webclient within the same page

Chat with us if you have any questions!

<a href="https://app.imchime.com/TenantName/chat?pipelineContentItemId=PipelineId&webclientId=WebclientId" target="_blank" style="color: blue; text-decoration: underline;">Click To Chat</a>
<div onclick="window.open( 'https://app.imchime.com/TenantName/chat?pipelineContentItemId=PipelineId&webclientId=WebclientId','chimeChat','height=650,width=500,menubar=no,status=no,titlebar=no,toolbar=no,resizable=yes')"> Click for Support </div>

<style>
  #instant-chat {
    width: 180px;
    height: 50px;
    margin: auto;
    cursor: pointer;
    color: #fff;
    background: #2983C5;
    padding: 20px 0 0 25px;
    font: bold 18px sans-serif;
    border-radius: 5px;
    z-index: 9999;
    text-shadow: 1px 1px 1px #333;
  }
</style>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<div class="hidden-xs hidden-sm start-chat" id="instant-chat-example1" onclick="
  var url='/chat?webclientId=';
  var windowName = 'chimeChat';
  var windowSettings = 'height=650, width=500, menubar=no, status=no, titlebar=no, toolbar=no, top=130, left=200, resizable=yes'
  window.open(url, windowName, windowSettings);
">
  <i class="fa-regular fa-message me-1"></i> Support
</div>

<style>
  #instant-chat-example1 {
    position: absolute;
    right: -10px;
    top: 120px;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    cursor: pointer;
    color: #FFF;
    background: #2983C5;
    padding: 5px 10px 35px;
    font-weight: 700;
    font-size: 18px;
    border-radius: 5px 5px 0 0;
    z-index: 9999;
    box-shadow: 0 0 4px 2px #666;
    text-shadow: 1px 1px 1px #333;
  }
</style>

This is a code example of the simplest way to open up the web client in a new tab. You will need to replace the parts that are in bold with the corresponding values:

  • Tenant Name - This is the name of your tenant. It will be assigned when your tenant is created

  • Pipeline Id - This is the value you will need to make sure the webclient is pointed at the correct chat pipeline. This is primarily used you have multiple chat pipelines that you want users to route into (IT, HR, Sales, etc…). One of your ChimeV5 Admins or Managers will be able to get the value from the pipeline.

  • Webclient Id - Similar to the pipeline, we can support multiple different views of the webclient. You can use any of the default ones that are included in ChimeV5, or create your own. An Admin can get the webclient Id from the webclient editor and use that to customize the way your end users see the chat session. The below examples will have various different webclients to show the variety of chat experiences.