From 2df131bd05281d0ba3b1612141aa9161acec9894 Mon Sep 17 00:00:00 2001 From: sh <37271604+shumvgolove@users.noreply.github.com> Date: Sat, 20 Jun 2026 13:13:56 +0400 Subject: [PATCH] docs: add channel webpage setup guide (#7097) * docs: add channel webpage setup guide Step-by-step guide for channel owners to set up a web preview page: enable the webpage in the app, copy the generated embed code, and host the page. Includes the customizable data-* attributes and troubleshooting. Linked from the user guide contents. * docs: reorder channel webpage steps to recommended flow Set up embedding first to build and test the page from any address, and set the webpage URL last so the link is only shown to subscribers once the page works. Also drop the incorrect 'Save and notify channel subscribers' prompt references (that dialog only appears when leaving with unsaved changes, not on Save). --- docs/guide/README.md | 1 + docs/guide/channel-webpage.md | 127 ++++++++++++++++++++++++++++ website/src/_data/docs_sidebar.json | 1 + 3 files changed, 129 insertions(+) create mode 100644 docs/guide/channel-webpage.md diff --git a/docs/guide/README.md b/docs/guide/README.md index 04e7538968..ad3849d1d3 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -10,6 +10,7 @@ The first messaging platform that has no user identifiers of any kind — 100% p - [Quick start](#quick-start) - scroll down this page - [Sending messages](./send-messages.md) - [Secret groups](./secret-groups.md) +- [Channel webpage](./channel-webpage.md) - [Chat profiles](./chat-profiles.md) - [Managing data](./managing-data.md) - [Audio & video calls](./audio-video-calls.md) diff --git a/docs/guide/channel-webpage.md b/docs/guide/channel-webpage.md new file mode 100644 index 0000000000..8cb0f4fbe5 --- /dev/null +++ b/docs/guide/channel-webpage.md @@ -0,0 +1,127 @@ +--- +title: Channel webpage +--- +# Channel webpage + +A channel webpage shows a preview of your channel on the web: its name, description, recent messages and subscriber count. Visitors can see what the channel is about before they subscribe, and the page gives them a "Join" button along with links to download the app. + +You don't have to build the preview yourself. The chat relays that host your channel publish its content as a small file, and a ready-made script renders it on your page. All it takes is to copy the code the app generates and paste it into a web page you host. + +## What you need + +A channel webpage can be set up by the **owner** of the channel, as long as the channel is hosted on chat relays that support webpages. If they don't, the app shows "Used chat relays do not support webpages." and no code is generated. + +You'll also need somewhere to publish an HTML page. Your own site works, but any static hosting will do. + +## Step 1. Open the channel webpage settings + +Open the channel and tap its name at the top to open the channel information. Scroll down to **Advanced options** and tap **Channel webpage**. This button is only shown to channel owners. + +## Step 2. Allow embedding while you build the page + +Turn on **Allow anyone to embed** and tap **Save**. + +With this on, the relay serves your channel preview to any page, so you can build and test from wherever the page lives without it being tied to one domain yet. Leave the webpage URL empty for now; nothing is shown to your subscribers until you set it. + +## Step 3. Copy the code + +Under **Webpage code** you'll see a snippet like the one below. Tap **Copy code**. + +```html +
+ +``` + +Everything specific to your channel is already in the code: its link, its ID, and the relay domains that serve the preview. There's no need to edit those values. + +## Step 4. Add the code to your page and test it + +Paste the snippet into the page you're going to publish. Here's a complete minimal page: + +```html + + + + + + My Channel + + + +
+ + + +``` + +Publish the page and open it in a browser. The channel preview shows up in place of the `
`. Because embedding is still open, it loads no matter which address you test from, so you can adjust the page until it looks right. + +## Step 5. Set the webpage URL and lock it down + +Once the page works, go back to **Channel webpage** in the app: + +- Under **Enter webpage URL**, type the address where the page is published, for example `https://example.com/my-channel`. +- Turn **Allow anyone to embed** off if you don't want other sites to be able to show your channel preview. Leave it on if you're happy for anyone to embed it. +- Tap **Save**. + +The URL now appears as a link in your channel info that every subscriber can see. If you turned embedding off, the relay also restricts the preview to your own domain. + +## Customizing the preview + +You can add optional `data-*` attributes to the `
` to change how it looks. Only `data-channel-id` and `data-relay-domains` are required, and both are already in the generated code. + +| Attribute | Values | Default | What it does | +| --- | --- | --- | --- | +| `data-channel-id` | channel ID (from the app) | none | Required. Identifies the channel to load. | +| `data-relay-domains` | comma-separated domains | none | Required. Relay domains that serve the preview, tried in order. | +| `data-channel-link` | channel link | none | Enables the "Join" button and QR code. Recommended. | +| `data-app-download-buttons` | `on`, `off` | `on` | Shows or hides the app download buttons. | +| `data-color-scheme` | `light`, `dark`, `site` | `light` | Color theme. `site` follows your page's theme (it uses dark styling when a parent element has the `dark` CSS class). | +| `data-light-background` | CSS color | `#ffffff` | Background color in light mode. | +| `data-dark-background` | CSS color | `#000832` | Background color in dark mode. | +| `data-relay-scheme` | `https`, `http` | `https` | Protocol used to load the preview from the relays. Leave it as `https`. | + +For example, here's a dark theme with a custom background and the download buttons hidden: + +```html +
+ +``` + +## Good to know + +The preview updates on its own. The relays republish channel content periodically, so the page picks up new messages without any change on your side. It's a read-only snapshot, so visitors can't post to it. + +Only what the channel already shows publicly is included: recent messages, member display names and avatars, reactions, and the subscriber count. Deleted and disappearing messages are never published. + +If your channel is served by more than one relay, all of them are listed in `data-relay-domains`. The script tries them in order, so the preview still loads when one relay is unavailable. + +## If something doesn't work + +If the preview area stays empty, check that the page is hosted on the same domain as the URL you set in Step 5, or turn **Allow anyone to embed** back on while you sort it out. The relay only lets that domain load the preview. + +If the app says "Used chat relays do not support webpages.", the relays hosting your channel don't support this feature yet, so no code can be generated. + +If there's no **Channel webpage** button, remember that it only appears for channel owners on channels hosted on relays. diff --git a/website/src/_data/docs_sidebar.json b/website/src/_data/docs_sidebar.json index f9b4d15b54..e640b7df71 100644 --- a/website/src/_data/docs_sidebar.json +++ b/website/src/_data/docs_sidebar.json @@ -6,6 +6,7 @@ "README.md", "send-messages.md", "secret-groups.md", + "channel-webpage.md", "chat-profiles.md", "managing-data.md", "audio-video-calls.md",