The Widgets functionality allows you to view external applications or websites (via a URL) on various Botmaker screens. This makes it easier for teams to access CRMs, metrics dashboards, or proprietary tools without leaving the platform. You can:

• Embed any authorized external tool through a URL.
• Configure widget visibility according to the user role (Agent, Supervisor, Admin).
• Customize the visual format (side panel or floating window).
• Make the tool available on more than 20 different screens (Chats, Contacts, Tickets, etc.).
• Establish two-way communication so the widget can send or receive data from Botmaker.

Prerequisites

• Access to your Botmaker account with Supervisor or Super Admin permissions for the initial configuration.
• URL of the external tool you wish to embed (it must allow loading in iframes).
• Basic technical knowledge if you wish to implement two-way communication or security validation.

Key concepts

• Two-way communication: The widget's ability to interact with the Botmaker interface (e.g., automatically completing a text field).
• Panel: The widget appears on one side and "pushes" the screen content so as not to cover it.
• Overlay (Floating): The widget appears over the content and can be dragged or resized.
• Domain permissions: Security configuration necessary for the browser to allow loading external resources (images, fonts) within the widget.

How to configure your first Widget

Step 1: Enter the configuration section Go to the Channels and Integrations menu and select the Custom Widgets option.

Step 2: Create and customize the widget Click on "Create custom Widget".

Enter the URL of the tool you want to embed.

Select the screens where you want it to appear (e.g., Chats screen, Contacts, Tickets).

Define the visual format: choose between a side panel (which pushes the content) or an overlaid floating widget.

Configure dimensions (width/height) and whether you allow the user to drag or close it.

Step 3: Define visibility by roles Configure which profiles from your team will be able to see and use the widget. You can restrict it only to supervisors or enable it for all agents.

Step 4: Authorize security domains If your widget uses images or fonts from other sites, make sure to add those domains in the security section to avoid browser blocks.

Step 5: Test in the Playground Use the live Preview to interact with the widget before activating it. You will see exactly how it will behave on the selected screen.

Possible use cases

• 360 Sales Dashboard: View customer goals and metrics in real time while chatting with them.
• CRM Integration: Access the customer's technical file in your internal system without switching tabs.
• Ticket management: Create custom buttons in the widget that automatically close tickets or change statuses in Botmaker.
• Quote inquiry: Embed a price calculator or currency converter to provide quick answers.
• Debug tools: Implement test pages to verify communication events between systems.

Advanced implementation: communication and security

If your goal is not just to view a page, but to achieve a deep integration between both platforms, it is necessary to perform a technical configuration on the server side of your widget. When implementing a custom widget, Botmaker sends a security token that your system must validate using a public key. This ensures that the information is legitimate and protects your tool from malicious agents.

Additionally, you can subscribe to real-time events (such as opening a chat) and send direct actions from the widget to Botmaker (such as completing text fields or closing tickets).

Do you want communication between your widget and Botmaker? Enter here to access the technical documentation for developers.

Frequently Asked Questions (FAQ)

Can any web page be used as a widget?

Almost any tool that can be embedded via a URL works. However, some pages block their loading in iframes for security. It is recommended to validate this in the configuration preview.

Can agents create their own widgets?

By default, the configuration is designed for supervisors and administrators, but visibility and permissions can be adjusted through custom roles.

Why isn't my widget loading external images or fonts?

This usually happens due to browser security blocks. You must explicitly authorize external domains in the widget's security settings in Botmaker.

Is it necessary to know how to program to use this feature?

To embed an informative page, it is not necessary. However, for the widget to "talk" to Botmaker (two-way communication), a technical implementation following our documentation is required.

What happens if the widget covers important information on the screen?

You can configure the widget as a Panel that "pushes" the content to the right instead of floating over it, ensuring that no metric or chat remains hidden.

Can I modify an existing widget?

You can modify the widget by clicking the “edit” icon. Remember to click “Save changes” for them to take effect on the widget.

Remember to visit our Help Center for further information.