Documentation

Readonly Mode UI

If you activate readonly mode, you can use it as a paywall for your users

These settings control what users see when the chat is switched into read-only mode. Configure them under Settings → Chat Customisation → Interface → Readonly Mode UI. The settings are shared across all platforms — there is no separate Web / iOS & Android version.

There are two display modes. Pick exactly one:

  • Bottom padding — reserve empty space at the bottom of the chat instead of the message input.
  • Action button — replace the message input with a custom call-to-action button.

Bottom padding

Use this mode when you want a clean read-only feed without any extra interaction.

  • Bottom padding, px — height of the empty area below the last message, in pixels. Default: 60. Any positive integer is accepted.

That is the only configurable value for this mode.

Action button

Use this mode when read-only is a temporary state — for example, you put unauthenticated users into read-only mode and want to invite them to sign in or join the chat.

The form has a row of language tabs at the top (EN, RU, PT, ES, UK, FIL, TR, FR, KA, DE, EL, IS, …). Switch the tab to translate the texts into another language. Watchers stores per-language values, and each user sees the version that matches their interface language.

For the selected language, fill in:

  • Button text — label shown on the button.
  • Additional message — optional text shown next to or above the button. The field appears only after Button text is filled in.

Repeat the same for every language you support. If a translation is missing for a language, Watchers falls back to the value of the most recently saved language.

On Click behavior

Choose what happens when a user taps the button. Two options:

Post message

When the user taps the button, the chat sends a postMessage event to the parent window:

{ type: 'joinChatClick' }

Your integration listens for this event and decides what to do — for example, opening a sign-in dialog or navigating the parent page somewhere.

Example listener:

window.addEventListener("message", (event) => {
  if (event.data?.type === "joinChatClick") {
    // Open your sign-in flow, navigate the parent page, etc.
  }
});

Pick this option when the chat is embedded into your own application and you want full control over what happens after the click.

Open link

When the user taps the button, the chat opens a URL in the browser. Configure:

  • Button link — the URL to open.
  • In current tab / In new tab — where the URL opens. Pick In new tab if you do not want to navigate the user away from the page that hosts the chat.

Pick this option when you have a public sign-in or registration page and just want to send the user there.

Tips

  • If you switch between modes after configuring them, the values from the unused mode are preserved — switching back restores them.
  • The live preview on the right side of the page (the Read only mode mock-up) reflects your unsaved changes, so you can verify the look before clicking Save.