Memberchat

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>


<script src="https://cdn.likepay.dev/s/memberchat.js" data-project-id="<YOUR_PROJECT_ID>"></script>

In the script change <your_project_id> with your actual project id, which can be found on a </your_project_id>Projects & Subscription Page of your LikePay.dev Account.

project id

Setup Memberstack

Memberchat can read Memberstack data fields to display users' name and avatar. To setup that, add the following data attributes:


name="<MS_FIELD_ID>"

avatar="<MS_FIELD_ID>"

Instead of <ms_field_id> put actuall field_ids from Memberstack. </ms_field_id>

Attribute "name" should have a value of Memberstack field containing member's name.

ms name field

Attribute "avatar" should have avalue of Memberstack field containing member's profile picture.

ms photo field

Your final script should look like this:


<script 
  src="https://cdn.likepay.dev/s/memberchat.js" 
  data-project-id="b15306d537cc0c8a41601e94a0c26bfb" 
  name="name" 
  avatar="photo">
</script>

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.

Customize User Name and Avatar

Memberchat can read Outseta property fields to display users' name and avatar. To setup that, add the following data attributes:


name="<PROPERTY_SYSTEM_NAME>"

avatar="<PROPERTY_SYSTEM_NAME>"

Instead of <property_system_name> put actuall Person Custom Property system names from Outseta. </property_system_name>

Attribute "name" should have a value of "name".

Attribute "avatar" should have avalue of Outseta field containing member's profile picture.

Your final script should look like this:


<script 
  src="https://cdn.likepay.dev/s/memberchat.js" 
  data-project-id="b15306d537cc0c8a41601e94a0c26bfb" 
  name="name" 
  avatar="Avatar">
</script>

Pass Name and Avatar in URL

If you open a room with a member, who has never opened Memberchat and has no name and avatar in our database, you will not see his data and it will be difficult to identify user.

So you can pass data in URL parametrs, so that name and avatar will be displayed.

Add the following attributes in your URL using custom code:


<script>
  $('#button').attr('href', 'PAGE_URL?member_id=MEMBER_ID&name=USER_NAME&avatar=' + encodeURIComponent('IMAGE_URL'));
</script>

Change the "button" to your actual button id.

Make sure to install JQuery into your project to make the custom code work:


<script 
  src="https://code.jquery.com/jquery-3.6.0.min.js" 
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
  crossorigin="anonymous">
</script>

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

html-structure
chat-id

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

Open Chat Room

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.


?member_id=<USER'S_MEMBER_ID>

There are several ways to do so:

Add URL in Webflow CMS

You can use Zapier, Integromat or other service to put a URL to member profile CMS item and add memer id from membership system.

Use Custom Code

You can add parametr to the URL using custom JQuery code.


<script>
  $('#button').attr('href', '/CHAT_URL?member_id=MEMBER_ID');
</script>

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 by adding the following attribute to the Memberchat script on your page:


theme="dark"

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 following attribute with color hex code to your script:


color="#7579d0"

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

Setup Guide

Memberchat Demo

See Memberchat installed and working at actual Webflow website. Clone this project and learn how to get Memberchat up and running in minutes!