As a prerequisites for using Memberchat you need to have Memberstack installed on your website
To install Memberchat, go to Account Settings' Projects & Subscriptions page and create a project.
When you have your project created, add Memberchat script in <head> tag on every page, where you want to display chat.
In the script change <YOUR_PROJECT_ID> with your actual project id, which can be found on a Projects & Subscription Page of your LikePay.dev Account.
Memberchat can read Memberstack data fields to display users' name and avatar. To setup that, add the following data attributes:
Instead of <MS_FIELD_ID> put actuall field_ids from Memberstack.
Attribute "name" should have a value of Memberstack field containing member's name.
Attribute "avatar" should have avalue of Memberstack field containing member's profile picture.
Your final script should look like this:
On a page, create 2 <div> blocks one inside another. The parent <div> will be a chat wrapper with a class.
Set parrent <div> block's width and hight to free app space for chat to render inside. We recommend to set Width as 100% of your container and Height at 500px, but feel free to style in the way which fits your design best
Set child <div> block's ID to "memberchat-app". Chat will render instead of this <div> block. Don't set any class to this block.
Go and publish your project. You will see Memberchat rendered on you page!🥳
To open a chat room with a particular member, you need to set member id as a URL parametr on a page, where chat is being used.
You can add some styling to customize how Memberchat will look like on your website.
By default Memberchat uses light theme, but you can change it to dark theme by adding the following attribute to the Memberchat script on your page:
You can compare how light and dark themes look like by checking out the demo on Memberchat page.
You can set your own accent color for chat by adding the following attribute with color hex code to your script:
Make sure to change the color hex with your own color code before adding the attribute to the script on your website.