From Static Pages to Interactive Spaces: Embedding Now4Real Chat

#webdev #programming #javascript #code

Today I want to show a cool thing. Have you never thought to chat instantly inside a specific web page with other people who share the same interest?

Now4Real is an excellent solution for that.

We at Claranet Italy have made this integration with a web management software: Logica by Sinapsi SB.

Now I show how we did it and how simple it is to integrate this tool into every web page.

First of all, we have to create an account on https://now4real.com/, and then we will have to access the dashboard like this:

As you can see in the bottom right corner, we have the chat icon, and this keeps track of the people, in that specific moment, who are showing the same page as you.

Inside it, we can chat with other people and share knowledge about the page, or share the same interests or something like that.

Let's move to the practice.

From the dashboard, we have to add a new site.

Important: Here we have to use a public domain.

Now, inside index.html of our application, we have to add this line of code:

<meta name="now4real-site-verification" content="XXXXX"/>

where XXXXX is a key provided by now4Real when you add the new site.

Commit and publish this modification to link the site with now4real.

Then we can manage the JWT authentication, because we want to use a logged-in user inside of Logica. So, if I log on to Logica with the Angelo user, I want to use the chat with the same user.

To do this, go to the menu dashboard under the Authentication menu item and generate a shared secret

As you can see, you have a lot of configuration on the side of the menu. We will show something later.

Now we need a JWT signed with the algorithm HS256, and use it inside the now4real object, like this:

window.now4real = window.now4real || {};

now4real.config = {
target: "api+widget",
scope: "page",
custom_auth: {
    enabled: true,
    jwt,
},
page_context: getPageContextFromHash()
};

Here are some considerations:

target is api+widget by now4real documentation to istantiate the service
scope, we want to use this to enable different chats per page.
custom_auth to use the authentication inside the chat
page_contextto use the discriminant per page, for example an id.

To remove the chat from some pages, currently we can remove the widget from the DOM like this:

const removeNow4RealFromDom = () => {
    document.getElementById('NOW4REAL')?.remove();
    const SCRIPT_REGEX = /.*now4real\.(min\.)?js/;
    document.querySelectorAll('script').forEach((script) => {
    const src = script.getAttribute('src');

    if (src && SCRIPT_REGEX.test(src)) {
        script.remove();
        console.log(`Removed Now4Real script: ${src}`);
    }

    });

    isInitialized = false;
    delete window.now4real;
};