Engaging with your site users has become easier through chat functionalities, such as offered by Freshchat. ShortPoint has made it possible to incorporate these functionalities in your SharePoint Modern site through Theme Builder.

You also have an option to add Freshchat functionality through the ShortPoint Code Element. Check out the article on Example Use Cases for ShortPoint Code Design Element: Part 1 for steps to adding a chat widget.

TABLE OF CONTENTS

• Prerequisite
• Step 1: Navigate to ShortPoint Theme Builder
• Step 2: Open the Custom JavaScript window
• Step 3: Copy and Paste custom code
• Step 4: Apply and Publish

Prerequisite

• You have a licensed version of Freshchat and you have your web chat token.

It is as easy as following these steps:

Step 1: Navigate to ShortPoint Theme Builder

Navigate to the ShortPoint Theme Builder for Modern Pages from the site page.

Step 2: Open the Custom JavaScript window

In the Theme Builder, go to Utilities > Custom JavaScript.

Step 3: Copy and Paste custom code

Insert the following code into the Custom JavaScript window.

Note: It is important to insert your Freshchat web chat token.  Check with Freshchat for more information on your Freshchat web messenger.

function initFreshChat() {

    window.fcWidget.init({

        token: "WEB_CHAT_TOKEN",

        host: "https://wchat.freshchat.com"

    });

}

function initialize(i, t) {
    var e;
    i.getElementById(t) ? initFreshChat() : ((e = i.createElement("script")).id = t, e.async = !0, e.src = "https://wchat.freshchat.com/js/widget.js", e.onload = initFreshChat, i.head.appendChild(e))
}

function initiateCall() {
    initialize(document, "freshchat-js-sdk")
}
window.addEventListener ? window.addEventListener("load", initiateCall, !1) : window.attachEvent("load", initiateCall, !1);

Step 4: Apply and Publish

Click Apply and Publish the changes.

The Freshchat window will appear as intended.

Related articles:

• How to apply custom JavaScript/CSS on a Modern SharePoint site
• Execute Custom JavaScript on Specific Modern Pages
• Introducing ShortPoint Code Design Element
• Example Use Cases for ShortPoint Code Design Element: Part 1
• Example Use Cases for ShortPoint Code Design Element: Part 2