From signup to live in 10 minutes.

Head to app.midwaychat.app/signup and create an account. You’ll sign in with the same Memberstack identity your site uses, so your team can manage Midway with the accounts they already have.

The Free plan is enough to get going, no credit card needed.

From the dashboard, click Create project and give it a name (e.g. Pottery Club). One project covers one community / one site. You’ll need Studio if you run several.

On the project page, switch to the Embed tab. You’ll see the iframe snippet you’re going to paste into your site.

Wherever you want the inbox to appear (a dedicated /messages page is the usual home), drop in a Custom Code / HTML Embed block in Webflow (or paste into the raw HTML in any other site) and paste the snippet:

<div data-midway="inbox" style="height: 600px; width: 100%;"></div>
<script
  src="https://app.midwaychat.app/midway.js"
  data-project-id="YOUR_PROJECT_ID"
  defer
></script>

Replace YOUR_PROJECT_ID with your project ID, or copy both lines ready-made from the Embed tab in your dashboard. The script builds the inbox inside the div and signs in the current member, so paste both rather than an iframe on its own.

Midway reads the current member’s identity from Memberstack on your site, so the chat knows who’s logged in. There’s nothing extra to install. As long as the page where you embed Midway has the standard Memberstack script and the member is signed in, the inbox identifies them automatically.

The page should be gated so that only logged-in members reach it. In Memberstack’s settings, restrict the route (e.g. /messages) to members, and redirect unauthenticated visitors to your login page.

Open the page in two different browsers (or browser + incognito) and sign in as two different Memberstack members. Send a message from one to the other, and it should arrive in real time, without a page refresh.

If something doesn’t feel right, the most common culprits are page caching (hard-refresh) and Memberstack not being initialised on the embed page.

On the Theme tab in your project, you can adjust:

• Accent colour: the colour of outgoing message bubbles, focus rings, and live indicators.
• Surface colour: the soft background tone behind the chat.
• Custom logo (Studio): replaces the Midway mark inside the inbox header.
• “Powered by Midway” badge: on by default on Free, hidden on paid plans.

Changes take effect immediately for everyone on your embed, so you don’t need to redeploy your site.

For marketplaces and directories, where members contact someone from their profile or listing page. All of these live on the General tab.

• One-on-one chat from profile pages: turn it on and the Embed tab gives you a second snippet with a data-with attribute. Set it to the profile owner’s Memberstack member ID. In Webflow, insert it from a CMS field.
• Chat requests: on by default. Turn it off to let members message each other straight away.
• Members tab: on by default. Turn it off on a marketplace, so people reach each other from profile pages rather than browsing everyone.
• Confirm a deal (Studio): both people confirm in the chat before their contact details are shared, and contact details typed into the chat stay hidden until then. Choose who can send it (either person, or only the one who was messaged), the button text, and which Memberstack fields to share. Add data-item-id and data-item-title to a listing snippet so each deal shows which listing it’s for. Both are optional: leave them out for a freelancer or member profile.

What to bind each attribute to, usually with Webflow’s + Add Field:

• data-with: the profile or listing owner’s Memberstack member ID (starts with mem_). Required.
• data-item-id: the listing’s own ID, such as its CMS slug. Not a member ID.
• data-item-title: the listing’s name, like “2022 Hatchback”. Not the person’s name.

To test, log in as a different member. On your own profile you’ll see your normal inbox, since you can’t message yourself.