Precision Contact Web Chat Installation Notes

Downloads

Code Placement

If your site is built on Wordpress, you can use the plugin shown above.

Otherwise, place these references in the links section of the code of the page where you want the chat feature to display. :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://pcwebchat.messagemybiz.com/pc/pcwebchat.min.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400;500;700&family=Alata&display=swap" rel="stylesheet">

Put these references in the scripts section of the page code. If your code already references jQuery and/or Bootstrap you don’t need to add their references again. Be sure the pcwebchat references are placed after the references to jQuery and Bootstrap.

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://pcwebchat.messagemybiz.com/pc/pcutils.js"></script>
<script src="https://pcwebchat.messagemybiz.com/pc/pcwebchat.min.js"></script>

If you are hosting the Precision Contact Web Chat files, instead of using the provided CDN versions, replace the href shown in the yellow links above with the appropriate paths for your installation.

Web Chat Key

Place your Web Chat Key in a <script> tag somewhere after the pcwebchat references noted above :

var WEB_CHAT_KEY = YOUR_WEB_CHAT_KEY';

To find your Web Chat Key, go to https://admin.messagemybiz.com/. Click on the Groups link in the left sidebar,

then click the item in the "Web chat groups" section that you want the key for.

The Web Chat Key is displayed on this page.

HTML Instructions

Place the following code directly after the opening <body> tag or directly before the closing </body> tag in the code of the page on which you want the chat feature to display. This will create the default “Start a chat!” button that displays in the lower right corner of the browser window:

<div id="pcChatHook"></div>

To place and style the button in a non-default manner, create any container, e.g.: button, span, div, etc., with an id of “chatLaunchBtn” and place in your code per your own requirement. For example:

<button id="chatLaunchBtn" class="yourClass">clb</button>

Precision Contact © . All Rights Reserved | Terms of Use