How To Install & Use

CustomerOS for Websites

With just a few lines added to your website or web application you can "answer your front door" and chat, meet, share, schedule meetings, sign documents and engage in a relationship with your website visitors through CustomerOS. The use cases are endless from sales, support, to billing. Follow along with this guide to enable your website visitors to engage with you directly from your website.

Prerequisites

You must have a ClientPoint account to continue and a profile alias. If you do not have one you can get one for free by signing up at https://www.clientpoint.me. When you are logged in click on your image in the upper right hand corner and click Edit Profile. Copy the text in Profile Link after the last / which is your profile alias.

How to Install

Add this script tag inside of the head tag in your website

<script defer id="cp-wm-sidebar-js" src="https://cdn.clientpoint.me/freemium-js/cp-sidebar.js"></script>
<script>window.addEventListener("load", (event) => { ClientPoint.init(); });</script>

Pass your custom settings to the sidebar

ClientPoint.init() also accepts a setting parameter which can include showing the CP icon and the container ID in which the iframe should inject

Here is an example settings object

ClientPointSettings accepts these parameters.

a. showCPIcon: Accepts boolean. if the true value is passed, it will show the CP icon on the page.

b. relationshipSuggestions: This field accepts the Clientpoint profile ID (profile alias) or multiple comma separated profile IDs. If the showCpIcon is set to true then the click-action will direct the user to the given profile ID page to connect with. If the profile ID is not found, then the click-action will direct to the Login Page.

c. buttonLabel: This field takes in a string of 30 characters max. if this button label is not specified then by default "LIVE" will be shown. This field will determine the width of the button

d. buttonCaption: This field shows the sub-head below the button label. There is no character limit for this field. This field will determine the height of the button.

e. logo: This field accepts the URL of a logo that the webmaster wants to show instead of the Clienpoint logo in the header. This should be a valid "https" URL. The wrong URL will result in a broken logo.

f. hideLogo: This field accepts a boolean value. If this is set to True then the logo passed by the customer will not show in the header. The default value for this field is false. This will not affect the clientpoint logo or poweredByClientpoint logo.

g. headline: This field accepts a string. If the headline is provided then it will show on top of the multiple contact drawer.

h. subHead: This field accepts a string. If the subhead is provided then it will show on top of the multiple contact drawer and right under the headline.

 const clientpointSettings = {
        showCPIcon: true,
        relationshipSuggestions: "bryan.allen"  or  relationshipSuggestions: "bryan.allen,zebulon.evans,danish.hayat",
        buttonLabel: "Connect with US!",
        buttonCaption: "Weekdays from 5am to 8pm ET",
        logo:"",
        hideLogo:false,
        headline:"",
        subHead:"",
    };
   ClientPoint.init(clientpointSettings);

Load a specific relationship

Call this function whenever a user clicks on a button on your website. For example a Contact Sales, Contact Support, or Contact Us. Even if you have an About Us page that lists key team members you can enable a vistor to quickly establish a relationship directly.

 ClientPoint.showRelation(userName, currentUser)

a. userName will be the last part of the profile link. For example if the profile link is clientpoint.me/cp/john.doe, then the userName will be john.doe b. currentUser (optional) Use this field if you know the name or email of the visitor on your webpage. If you pass this information in the visitor can connect with userName much quicker because the initial form will be prefilled with firstName, lastName and email.

 ClientPoint.showRelation('zebulon.evans', {
    firstName:'Danish',
    lastName:'Hayat',
    email:'danish.hayat@clientpoint.net'
})

Show CustomerOS sidebar if it is hidden

 ClientPoint.show()

Hide CustomerOS sidebar if it is showing

 ClientPoint.hide()