Yandex Messenger widget for sites and applications

This feature comes with the Optimal plan.

Using the widget, you can embed Yandex Messenger with all its features into your corporate website or web application. With this widget, your employees will have a safe channel for internal communication.

You can use the widget:

  • On the corporate site.
  • In the mobile app through WebView.

Widget display options and usage examples

Display option

Where it can be used

Inline block

It's embedded in a designated spot on the page and occupies 100% of the height and width of the container node.

On the corporate portal

You can add an inline block with a list of work chats that the user will see after logging in via SSO or OAuth.

Floating button with a pop-up

The Yandex Messenger pop-up usually appears in the bottom-right corner when you click the button.

For internal support service

The floating button will open the support chat for employees. Using the widget API, you can immediately open a chat with a specific employee or bot by ID.

Separate pop-up

Good option if you have your own widget opening button and want to customize its behavior.

During HR onboarding

The widget immediately opens a welcome chat with the bot and the HR manager for newcomers. You can also set up opening a chat with a specific bot.

Alert

Use the Yandex Messenger widget only for internal communication. It's not appropriate for support interactions with external users or as a CRM widget.

Сonnecting the widget

You'll need a Yandex 360 admin and a front‑end developer to connect the widget.

Admins

  1. Submit a support request. Select the "Other" option in the form and specify:

    • The list of domains or hosts where the widget will be placed.
    • The expected RPS load.
    • Your contact information.

  2. In the reply email, you'll receive a serviceId, which you'll need to connect the widget to the site. Obtaining the serviceId may take up to three weeks.

  3. Pass the serviceId to the front-end developer.

Front-end developers

  1. Connect the package yandex-messenger-widget.

  2. Create an OAuth application in Yandex ID:

    1. Complete Steps 1.1–1.4 of the API documentation.

    2. Specify the required permissions: Read and send messages in chats — yamb:all.

    3. Configure the transmission of user OAuth tokens to the widget each time it opens.

      Warning

      OAuth tokens can be stored on the service backend. Don't use the browser's local storage for this purpose.

    4. Register your OAuth application on the Create an app page.

  3. Write the code and embed the widget UI into the site.

  4. Yandex Messenger opens in an <iframe>, so prepare CSP headers for your site that will allow the use of this element.

  5. Set up the Yandex Messenger display theme and the flags that determine its behavior.

  6. Test the widget and make sure everything is working correctly.

  7. After that, you can add the widget to the existing site and inform users about it.

  8. Subscribe to events and monitor the availability of the feature.

The detailed documentation for developers includes a comprehensive integration example for a React application and is available here:

Previous
Department chats
Next
Telemost