Ir al contenido
Yedran help

Install the chat on your website

Esta página aún no está disponible en tu idioma.

Install the chat on your website

You add a chat bubble to your website so visitors can write to your workspace and Lucía answers them.

Who: an administrator who can edit the HTML of the website. Permission: channels.manage.

Before you start

  • Check that you can open System in the console sidebar and see the Channels tab. The tab needs the channels.manage permission. If you don’t see System, open Organisation from your account menu, then the Channels tab.
  • Have the exact address of each page that will carry the chat, such as https://example.com. Write the address with its https://, and add the www. form too if your site answers on it.
  • Make sure the workspace that will answer has a knowledge base. The console refuses to create a channel for a workspace without one.
  • Make sure you can paste a script tag into the site. A website builder’s “custom code” box in the page footer works.

Steps

  1. To open channel settings, select System in the sidebar, then the Channels tab. The page is titled Channel Management and shows a card for each kind of channel.
  2. On the Web Widget card, select Connect. The Connect channel dialog opens on the channel’s form.
  3. If you have several workspaces, check Workspace, because the chat answers from that workspace’s knowledge base.
  4. Fill in the details. Channel name and Slug (identifier) are required; an empty origins list makes the chat refuse every page.
    • Channel name: a label for your team, for example “Website chat”.
    • Slug (identifier): lowercase letters, numbers and hyphens only, for example my-widget.
    • Allowed origins (CORS): the addresses of the pages that may show the chat, separated by commas, for example https://example.com, https://www.example.com. An address is the scheme and the domain, with no path and no wildcard.
  5. To change the colours, open Visual customization and set Primary color, Accent color and Background color. The Live preview shows the result. This step is optional.
  6. Select Connect. The dialog shows “name created” and checks the connection.
  7. Read the check result. The line Connection verified — the channel is reachable. means the channel exists and has an allowed origin. If you see the warning “Created, but we couldn’t verify it yet” instead, close the dialog, open Configure on the channel card and select Test connection (saved config). The Embed preconditions list shows which check failed.
  8. Under Embed code, select Copy. The button reads Copied. Then select Done.
  9. Paste the tag into the pages of your site, immediately before the closing </body> tag. Save and publish the site.
  10. To switch the chat on, find the channel’s card on the Channels tab and select Enable. The button then reads Disable. A web chat channel is created disabled, and a disabled channel does not appear on your site.

The embed code is one script tag. It has this shape, with your channel’s identifier in place of the placeholder:

<script src="https://cdn.yedran.com/yedran-widget/latest/yedran-widget.js" data-channel-id="<your channel id>" defer></script>

If your deployment is not at app.yedran.com, the tag also carries a data-api-base attribute naming your deployment. Copy the tag from the console instead of typing it.

If you don’t see the embed code and the console says “Set BASE_URL to this server’s public address to generate the tag.”, the deployment has no public address a visitor’s browser can reach. A person who runs the deployment must set it.

If you leave the dialog before copying the tag, open Configure on the channel card. The Website integration section shows the same Embed code with a Copy button.

Result

Open a page of your site in a fresh browser window. A chat bubble appears shortly after the page finishes loading. Send a message from it. The conversation arrives in your inbox and Lucía answers from the knowledge base of the workspace.

If the bubble appears but the chat does not connect, the address of the page is missing from Allowed origins (CORS). Open Configure on the channel card, add the exact address, and select Save changes. Addresses are matched exactly and without regard to capital letters, so https://www.example.com and https://example.com are two different entries. The console can take up to 30 seconds to apply a change to page requests.

If the bubble does not appear at all, check these in order:

  • The channel’s card shows Disable, not Enable. A disabled channel gives visitors nothing.
  • The tag is on the page you opened, with defer and the attribute that names the channel unchanged. Some site optimisers remove or rewrite data- attributes, so exclude this tag from them.
  • The page’s own Content-Security-Policy, if it has one, allows scripts from https://cdn.yedran.com, inline styles ('unsafe-inline' in style-src), and connections to your Yedran address over both https and wss.

Limits

  • The chat’s name and logo come from the workspace’s branding, set on the Brand tab, not from this form. The three colours in Visual customization belong to this channel only.
  • One script tag serves one channel. Put only one Yedran chat tag on a page.
  • Renaming the slug of a saved channel does not break a pasted tag, because the tag names the channel by its identifier.
  • Allowed origins accept exact addresses only. There is no wildcard, and an empty list rejects every page.