Website Widget

A section for users who install the Senler AI widget on their website and want the chat to understand the current screen, open business entity, and user-selected element. This helps explain a button, field, form, setting, or another important block and, when needed, show it on the page.

This section describes the connection between four parts: the widget Public API, context tags, site markup, and Markdown documentation. The user sees a normal chat with clear page or selected-element tags, and the answer can be linked to the right article and a specific element on the current page.

Main tasks

• Public API of the widget - how to initialize the widget, update page context, pass one-time message context, and declare customActions.
• Markup of site elements - what data-ai-* attributes to add to buttons, fields and blocks.
• How AI Highlights Page Elements - how highlighting, scrolling, clicking and typing work.
• Linking Markdown documentation to site elements - how to write instructions so that a phrase in the text is linked to the exact context_id.
• How the assistant relies on documentation - how articles, search, and context keys help answer and suggest steps.

Principle

Describe the interface directly in human instructions: “click button to add channel”. The user will see clear text, and AI can use the exact key to highlight the element.

Simple process map

1. The site initializes the widget once and passes persistent page context through contextProvider.
2. On SPA transitions, the site calls SenlerWidget.setPageContext(items) without recreating the widget.
3. If an action opens the widget for a specific entity or recommendation, the site passes one-time contextItems and, when needed, message.
4. On the site or in the cabinet, an important element receives a stable data-ai-context-id.
5. In the article, the same key is attached to a human phrase through span data-ai-context-id.
6. The user asks a question or selects an element through the widget.
7. The message is sent together with page or selected-element context tags.
8. The matching key points to the article, and if the element exists on the current page, the widget can show it or perform an allowed action.
9. The widget shows the result: completed, not found, blocked, or failed.

Who should read what

• Site owner: widget Public API, page context, custom actions, and element markup.
• Documentation editor: linking Markdown documentation to site elements.
• Front-end developer: data-ai-* rules, stable keys, and coverage checks.
• Agent configurator: how documentation helps suggest steps and when to choose an element context key.

Maintenance rule

When a new important button, field, menu, or card appears in the interface, update three things together: element markup, the article with inline data-ai-context-id, and the audit check. This keeps the documentation useful for humans and lets AI continue finding elements accurately.