Chat with a user from their Profile - Softr

Modified on Fri, 18 Nov 2022 at 06:50 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?

  1. Add the “List Details“ block to your page.


  2. Click on the block and start editing it. Add your Airtable table details of the table you want to configure on that page.

  3. Then, disable other unnecessary form elements.

    launch-dock-2 (1)


  4. To add a button, add the button label. Then, add an action for the button. While adding action, select the option “Open external URL“.

  5. 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.

    launch-dock-3 (1)


Opening the chat window on the same page - Docked Layout

  1. Add a button on the user’s profile page.

  2. Link the email field from the configured Airtable table. Select Action as Open external URL → Select the email field from the table.

  3. Add Custom Code Block and add the following JavaScript code to it:


<script>
document.addEventListener("DOMContentLoaded", function() {    
    setTimeout(function(){
        if(window.logged_in_user && window.logged_in_user['airtable_record_id']) {
            var email = "";
            if($('a:contains("Chat Now")').length > 0) {
                email = $('a:contains("Chat Now")').attr("href").split("://")[1];
                if(email != "") {
                    $('a:contains("Chat Now")').attr("href","#")
                    $('a:contains("Chat Now")').attr('onclick', 'javascript:jqcc.cometchat.launch({uid:"' + email + '"})');
                }
            }
        }
    },3000);
});
</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


  1. Add a button on the user’s profile page.

  2. Link email field from the configured Airtable table. Select Action as Open external URL → Select Custom URL field from the table.

    launch-embed-3


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 email field name to the ENCODE_URL_COMPONENT() function. Please refer to the following -


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


Please refer to the following video:


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 :)

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article