Match the widget's appearance to your site
Widget colors, themes, fonts, and corners can be matched to your site design using an AI agent or by scanning the site without code.
Updated
How can I match the widget's appearance to my site design?
There are two ways, both in Select site → Settings: via an AI agent (MCP) if you have your site's code, or via "Scan site" if your site is built with Wix, Shopify, WordPress, or another no-code builder.
What is matched is the widget's color, theme, font, and corners. Allowed domains, WhatsApp, and bot text are not changed. This feature is available on all plans, including Free. A shortcut is also available in Select site → Widget → Editor, link "Match automatically with site design".
How do I connect an AI agent like Claude Code or Cursor?
Open Select site → Settings, the "Connect AI agent (MCP)" card, then follow the three steps. First, click "Create token" (token name can be left blank). Second, install it in the agent: for Claude Code, run this command in your site project folder, replacing TOKEN_KAMU with the token from the first step.
claude mcp add --transport http inwebchatbot https://chatbot.inwebsite.online/api/mcp --header "Authorization: Bearer TOKEN_KAMU"Cursor, Windsurf, and other clients use the JSON config provided by the same card. Just add it to the MCP config. Third, copy the prompt from the "Ask the agent to match the widget" step and paste it into the agent.
What prompt should I send to the AI agent to match the widget?
Copy the prompt from step 3 of the "Hubungkan AI agent (MCP)" card in Pilih situs → Pengaturan, as it already contains your site ID and website address. It looks like this:
Samakan tampilan widget InWebChatBot situs SITE_ID (https://situsmu.com) dengan desain web di repo ini. Pakai MCP inwebchatbot: baca DESIGN.md atau CSS/Tailwind proyek ini, cek dulu dengan preview_widget_theme, tunjukkan perubahannya, lalu terapkan dengan apply_widget_theme.In Claude Code, there's also a built-in prompt named samakan-widget, called with /mcp__inwebchatbot__samakan-widget. The agent reads the design from your repo, shows before and after changes, then applies them.
How do I create or revoke an MCP token?
Create a token using the "Buat token" button in the "Hubungkan AI agent (MCP)" card, Pilih situs → Pengaturan. The token will only appear once, so copy it immediately with the "Salin token" button.
- One token applies to all sites in your account and can only change widget appearance.
- Your email must be verified. One account can have a maximum of 10 active tokens.
- Active tokens appear in the “Active tokens in your account” list, complete with creation and last used times.
- To revoke, click “Revoke” then click again when the button changes to “Click again to revoke”. Agents using that token will immediately lose access.
How do I match the widget without code and without an AI agent?
Go to Pilih situs → Pengaturan, the "Samakan dengan situs (tanpa kode)" card, then click "Pindai situs". The server reads the homepage and CSS files from your website address. This process takes a few seconds, up to 20 seconds maximum.
The result is a table with columns for Section, Now, and Then for Color, Theme, Font, and Corner. Below that are the source of each value (info icon) and warnings if any. If the results look correct, click “Apply to widget”. If not, click “Cancel”. Changes apply to your site within about 1 minute.
If the table is empty and says “Widget already matches your site’s appearance”, nothing needs to be applied. Scanning is limited to 10 times per hour per account.
How do I undo widget appearance changes?
After clicking "Terapkan ke widget", a "Batalkan perubahan" button appears in the "Samakan dengan situs (tanpa kode)" card in Pilih situs → Pengaturan. One click reverts the widget's appearance to its state before application.
If you’re using an AI agent, ask the agent to call revert_widget_theme. You can also manually change colors, themes, fonts, and corners in “Pilih situs” (Select site) → Widget → Editor. If the Editor is open in another tab, it will reload the latest appearance when that tab becomes active.
Why are the scanned site colors inaccurate?
Site scanning guesses brand colors from your site’s CSS, and the guesses can be inaccurate. The order is: color variables like --primary or --brand, button background color, meta theme-color, then the most frequently used colored color. Gray colors are never chosen.
Results are most often inaccurate for stores with neutral colors (black or white) and sites where colors are set via JavaScript. That’s why the results are always shown to you before applying. White widget text must have enough contrast against the primary color, so overly bright colors are automatically darkened and flagged with a warning. Fonts only apply if your site actually loads that font.