Getting Started

As a prerequisites for using Memberchat you need to have a membership system installed on your website. Currently Memberchat works with the following membership systems:

Install Memberchat

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.</head>

In the script change PROJECT_ID with your actual project id, which can be found on a Projects Page of your LikePay.dev Account.

Setup Memberstack

Set Custom Fields

Memberchat can read Memberstack data fields to display users' name and avatar. To setup that, setup fields IDs in Memberchat settings:

"Name" should have a value of Memberstack field containing member's name:

ms name field

"Avatar" should have avalue of Memberstack field containing member's profile picture:

ms photo field

Provide API access

Setup Memberstack API key to syncronize existing members with Memberchat. It will get member's photo and names, which will be used to display data to other members in chat.

Setup Outseta

Provide Public Key

To use Memberchat with Outseta, you will need to provide a public JWT key to make authentication of your users possible.

You can find the key in Sign up and Login settings.

In Login settings, open advanced options. You will see JWT token settings.

Click on the key to open it. You will see the Key like this:

Copy the whole text of the key and paste it to Memberchat project settings.

Provide API Access

You can connect Outseta with Memberchat through API. It will let Memberchat import name and photo data for your members to display them in chat. Go throuth the following steps to do it:

Fill in your outseta URL:

Go to Outseta Integrations Settings:

Add a new API key. You can call it "Memberchat".

Copy your API Key and a Secret Key.

Then add them to Memberchat project settings:

Add Chat to Page

On a page, create 2 <div> blocks one inside another. The parent <div> will be a chat wrapper with a class.</div></div>

html structure

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</div>

chat wrapper size properties

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.

html-structure
chat-id

Go and publish your project. You will see Memberchat rendered on you page!🥳

Open Chat Room

To start a conversation you need to open a room with a particual member. It is done though passing a member id to the chat page in URL parameter.

On a page with members displayed (in a list of member template page) add a button with a link to chat page.

Add data attribute to that button:

Name:
Value:

In Webflow it will look like this:

Then add a text block right under that button to make sure that they have the same parent element.

Set this text block to display saved in CMS member ID and make this text block hidden.

Then add custom attribute to the text block:

Name:
Value:

In Webflow it will look like this:

Also don't forget to add Memberchat Script on this page as well. Script will take value of member id from text block and add it as a URL parametr to button link allowing to open a room with this member.

Styling

You can add some styling to customize how Memberchat will look like on your website.

Choose Theme

By default Memberchat uses light theme, but you can change it to dark theme using a theme switch in project settings:

You can compare how light and dark themes look like by checking out the demo on Memberchat page.

Accent Color

You can set your own accent color for chat by adding the color hex code in project settings:

Make sure to change the color hex with your own color code before adding the attribute to the script on your website.

Styling Examples

Light mode with default accent color:

Light mode with customized accent color:

Dark mode with default accent color:

Dark mode with customized accent color: