Website Widget

This section contains guides for developers who connect the Senler AI widget to a website. They explain how to pass the current page context to an agent, connect interface elements with documentation, and add actions performed by the website itself.

If you only need a regular chat, start with Connecting the Widget. It uses screenshots to cover channel creation, appearance settings, and the generated code. Widget Interface shows the chat from a visitor's perspective. Additional markup and the JavaScript API are not required for this setup.

Preparation

• Preparing the Widget — how to verify the basic connection and, when automatic AI replies are needed, connect a published and active agent to the channel.
• How the Integration Works — how context, markup, and actions differ, which data can be used to prepare a reply, and where the website's responsibility begins.
• Initialization Parameters — widget placement, configuration source, visitor data, and available chat features.

Context and Site Elements

• Page and Message Context — how to tell the agent which section, order, product, or other object is currently open.
• Site Element Markup — how to give important buttons, fields, and cards stable data-ai-* keys.
• Linking Markdown Documentation to the Site — how to connect an element key with a clear phrase in a guide.
• Element Selection and Actions — how visitors select an element and how the widget highlights it, scrolls the page, or changes a field.

Advanced Features

• Custom Actions — buttons in responses whose handlers are implemented by the website.
• Inline Edits — editing selected text with a result preview.
• Public API and Events — methods for controlling the widget and events for connecting it to the website interface.

Recommended Order

First connect the regular widget and complete the preparation. Then review the integration model and configure only the features you need: initialization parameters, context, markup, and the related documentation. Move on to actions, inline edits, and the Public API after a simple scenario is working.