By default, you can add AtomChat as a docked layout on your website (i.e the chat popup on the bottom right or left of your website) or as an Embedded Layout on any page.

For a Marketplace, typically, there is a vendor listing. And the option to start a chat with any vendor is present on their profile itself. 

How to start an instant chat with a Vendor?

A buyer on your website will browse through products listed by vendors. 

Similar to buying something just by clicking on a 'Buy Now' button, the most efficient way to enable a buyer to connect with the seller is by adding a 'Chat Now' button on their profiles!

How to launch a Private Chat window on-click of the button?

First, you need to create and add a 'Chat Now' button against vendor profiles. Clicking the button now has to action to open their private chat window.

We'll guide you how!

How to launch AtomChat's private chat window in the Docked layout on button-click?

Docked Layout

1. Create and add the button on your site against vendor profiles.
   
   
2. Use our Launch AtomChat JavaScript API
   
   

<button type="button" onclick="javascript:jqcc.cometchat.launch({uid:'1'});">Chat Now</button>

Here, you need to pass the user_id of the user to "uid" dynamically. This is the user_id of the vendor whose chat window should open.

In the above example, we have passed uid "1". This will open the chat box of the user whose user_id is "1". And this should be dynamically passed.

For example, if you are using WordPress, uid will be WordPress user_id.

Please refer to- **https://help.atomchat.com/launch-atomchat**

How to launch AtomChat's Embedded layout on button-click

You may want an inbox-like layout, i.e our embedded chat window for vendors and buyers. This layout can be opened by clicking a button.

Embedded Layout

1. Add AtomChat's Embedded layout to a page on your website.
   
   
2. Create and add the button on your site.
   
   
3. To launch the chat window on button click from one page to another page where you have the embedded integrated, you can refer to this sample code

<a href="[<https://abc.com/chat?userid=123>](<https://abc.com/chat?userid=123>)">Chat with John</a>

Please replace the href value with the page URL where you have AtomChat's embedded layout on your website and pass the userid value in the URL as GET parameter.

For userid, you need to pass the value of the selected user's userid dynamically.

     4. After the first click event, you are redirected to the embedded layout chat page. Then, you need to use this passed userid value in the URL to launch the selected user's chat box in the layout directly.

Retrieve userid value from the URL using this code

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

Once we get the userid value, use this code to launch that selected user's chat window

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

If you need any help with this setup, please reach out to us! 

Happy to help :)