Messenger Website Client

Download

The Messenger client script and CSS is available in the public Send2CRM repository on Github.

The base Send2CRM website client must be configured on the website first.

The messenger client is implemented as a custom element that may be added to the website as desired.

Include script

A copy of the client script may be copied to the web server, or it may be used directly from CDN.

<script src="/send2crm-messenger.min.js"></script>

The script makes the custom messenger element available to the page.

CSS

Send2CRM provides a CSS file with a default look and feel. When the custom element is loaded, the messenger client will attempt to reference send2crm-messager.min.css from the same location as the script file.

The messenger element is encapsulated within a closed shadow DOM, so the styles applied do not interfere with the website.

The CSS may be overridden with the data-stylesheet setting attribute. An un-minified copy of the default CSS is available to be extended, modified, or referenced.

Custom element

Send2CRM Messenger appears only when placed in the document. Add a <send2crm-messenger /> element in the desired location.

We suggest placing this within a dedicated container that is styled to give the desired visual effect. For example, this may use position: fixed; to float the messenger UI in a corner of the screen.

Minimum Client Script

The example below is all that is needed on the client side to establish bi-directional messaging with Salesforce.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Window Example</title>
    <link rel="stylesheet" href="styles.css">
    <script>(function(s,e,n,d2,cr,m){n[e]=n[e]||{};m=document.createElement('script');m.onload=function(){n[e].init(d2,cr);};m.src=s;document.head.appendChild(m);})('/send2crm.min.js', 'send2crm', window, 'fit230-dev-ed.develop.my.salesforce-sites.com', '131ed832-524c-f706-d954-9420f46e86bd');</script>
    <script src="/send2crm-messenger.min.js"></script>
</head>
<body> 
    <div class="chat-window">
        <send2crm-messenger data-heading="Messages">
        <!-- Chat messages go here -->
        </send2crm-messenger>
    </div>      
    </body>
</html>

The following CSS class (in styles.css) places the messaging window at the bottom right of the page.

.chat-window {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}