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.

Greeting and Starting a Conversation

A new chat can immediately show an automation message with text, buttons, and attachments, before the visitor's first reply. Displaying it does not start the automation or create a dialog record.

• Select a message in channel settings to set a common greeting and allow additional choices from the same or other automations.
• Configure selection based on website conditions to show different messages to a visitor with no dialogs and one who has already chatted, or use the current page and your website's data.
• Continue the conversation with automation messages when messages should also be sent after the first reply. This is a separate scenario from switching the greeting.

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 Context — how to tell the agent which section, order, or product is currently open. Data for one question is passed through message context.
• 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 — how visitors attach a button, field, or card to their question.
• Agent Actions on the Website — how the widget highlights elements, scrolls the page, and performs permitted actions.

Advanced Features

• Custom Actions — site actions triggered by buttons or agent calls that return a result.

• Inline Edits — editing selected text with a result preview.

• Public API — methods for controlling the widget. Readiness, errors, and callbacks are covered in widget events.

• Website user authorization for MCP — server requests to supply, renew, and revoke a user token and bind it to a widget lead.

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.

Configuration with AI

Connect Senler.io MCP to your development environment. AI can find documentation, read complete instructions, and help change the integration code. Project MCP suits a single project; User MCP works on behalf of a user with their accessible projects. The guide provides the exact server addresses and connection steps.

For example, describe the task like this: "Connect the widget to the website. Show an introductory message before the first conversation, and a different message to a visitor who already has dialogs. Read the documentation first and clarify which automations and steps to use."