Chat with a user from their Profile - Softr

Modified on Tue, 05 Mar 2024 at 04:25 PM

For your Softr Marketplace or Community, in addition to adding AtomChat’s default chat layouts, you can also start a one-on-one chat with a user directly from their profiles.

We’ll show you how ?

How to add a button in softr.io?

Add the “List Details“ block to your page.
Click on the block and start editing it. Add your Airtable table details of the table you want to configure on that page.
Then, disable other unnecessary form elements.
To add a button, add the button label. Then, add an action for the button. While adding action, select the option “Open external URL“.
Then, if you are using AtomChat’s docked layout, link the email field from the configured Airtable table. If you are using our Embedded layout, link the encoded URL component field from the configured Airtable table.

Opening the chat window on the same page - Docked Layout

Add a button on the user’s profile page.
Link the record_id field from the configured Airtable table. Select Action as Open external URL → Select the Airtable record_id corresponding to that user.
Add Custom Code Block and add the following JavaScript code to it:

<script>
document.addEventListener("DOMContentLoaded", function() {
    var clearInt = setInterval(function(){
        if(window.logged_in_user && window.logged_in_user['airtable_record_id']) {
        let urlStr = document.location.pathname;
        let params = (new URL(document.location)).searchParams;
        let recordId = params.get("recordId");
        if(recordId === null)
        {
            let urlArr = urlStr.split('/');
            recordId = urlArr[urlArr.length - 1];
        }
            var pageAttr = "";
            var btnName = 'Chat now';
            if($('a:contains('+btnName+')').length > 0) {
                pageAttr = $('a:contains('+btnName+')').attr("href").split("://")[1];
                if(pageAttr != "") {
                    $('a:contains('+btnName+')').attr("href","#")
                    $('a:contains('+btnName+')').attr('onclick', 'javascript:jqcc.cometchat.launch({uid:"' + recordId + '"})');
                    clearInterval(clearInt);
                }
            }
        }
    },500);
});
</script>

NOTE

Please make sure you’ve added AtomChat's Docked Layout code to your site first. If you haven’t, please refer to this documentation.

Opening the chat window on a new page - Embedded Layout

Add a button on the user’s profile page.
Select Action as Open external URL → Select Custom URL field from the table.

How to add a Custom URL (encoded URL component) field to your Airtable table (Embedded Layout)?

Add one column/field to the respective Airtable table. Then add the name of the field, type of the field should be selected as “formula“.
Add the formula in the combination of URL of the embedded layout page + userid + ENCODE_URL_COMPONENT()

Pass the record_id field name from Airtable to the ENCODE_URL_COMPONENT() function. Please refer to the following -

https://YOUR_WEBSITE_URL.softr.app/chat-test?userid="& ENCODE_URL_COMPONENT({airtable_record_id})

Please don't forget to add your website URL to this code.

NOTE

Please make sure the configured Airtable has an Email field for the users whose chatboxes are going to get opened.

Add the Custom Code field on the page where you have added AtomChat's Embedded layout and add the following JavaScript code there:

<script>
var url_string = window.location.href
var url = new URL(url_string);
var userid = url.searchParams.get("userid");

var setTimeForLaunch = setTimeout(function(){
 if(typeof CometChathasBeenRun != undefined){
  jqcc.cometchat.launch({"uid":userid});
    }
},3000);

/* To close already opened chatbox on before window unload */
window.addEventListener("beforeunload", function (event) {
  jqcc('#cometchat_synergy_iframe')[0].contentWindow.postMessage('CLOSE_CHATBOX','*');
});

/* Postmessage to iframe to check whether chatbox is loaded or not */
var setTimeToCheckChatbox = setInterval(function(){
    if(typeof CometChathasBeenRun != undefined){
        if(typeof(jqcc('#cometchat_synergy_iframe')[0]) != 'undefined'){
            jqcc('#cometchat_synergy_iframe')[0].contentWindow.postMessage('OPENED_CHATBOX_'+JSON.stringify({"UID":userid}),'*');
        }
    }
},2500);

/* If chatbox is not loaded then use launch JS API to launch the chatbox */
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
    if(typeof(e.data) != 'undefined' && typeof(e.data) == 'string') {
    if(e.data.indexOf('LOAD_CHATBOX_')!= -1){
        var controlparameters = e.data.slice(13);
        controlparameters = JSON.parse(controlparameters);
        console.log("loaded")
        jqcc.cometchat.launch({"uid":controlparameters.UID})
        clearInterval(setTimeToCheckChatbox);
    }
  }
});
</script>

custom-code-block (1)

custom-code-block (2)

Then open your AtomChat Admin Panel → Settings → Editor → Select Custom JavaScript from the dropdown and add the code given below. Enable Custom JavaScript from the top right corner.

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
    if(typeof(e.data) != 'undefined' && typeof(e.data) == 'string') {
    if(e.data.indexOf('CLOSE_CHATBOX')!= -1){
      if($(".cometchat_user_closebox").length > 0){
        $(".cometchat_user_closebox").click();
      }
    }
    if(e.data.indexOf('OPENED_CHATBOX_')!= -1){
        var controlparameters = e.data.slice(15);
        controlparameters = JSON.parse(controlparameters);
        if(typeof jqcc.cometchat.getActiveId == 'function' && jqcc.cometchat.getActiveId().length == 0){
            e.source.postMessage('LOAD_CHATBOX_'+JSON.stringify({"UID":controlparameters.UID}),'*');
        }

    }
  }
});

Need help with the setup?

We've got you! Please Contact Us if you need any help or have questions.

You can also schedule a remote session with our team of experts!

Happy to help :)