How to Embed a Chat on Your Website – On a Page or Product Card via iFrame in Binom
An iFrame lets you embed the chat directly into the page content: the Binom chat window sits in a product card, on a service page, or next to a request form. The customer asks a question without leaving the page. The embed code is copied from Integrations → iFrame and pasted into the right place on the page.
If Binom is needed across the whole site at once, a floating Widget is more convenient; if you don't have a site, use a public link. Comparison of options: what to choose for your site.
How to set up the chat window
- Open Integrations → iFrame.
- In the "Chat size" block, specify the width and height of the window in pixels. Base your choice on the space the window will take up on the page.
- To make the window look different from your other channels, tick "Customize design separately" and set "Chat color" and "Style and design". Without this tick, the shared colors from Settings → "Branding" tab are used (how to set a single brand style).
- Click "Update" and check the result in the "Chat preview" block.
Which code to paste on the site
Below the settings, there are three code blocks. They serve different purposes:
| Block | What it does | When it is needed |
|---|---|---|
| 1. "Copy the following code and paste it into the appropriate place on your website" | The chat window itself, in the chosen size. The window loads when the visitor scrolls down to it, so it does not slow down page loading. | Always: this is the main code. |
| 2. "…script that is recognized as the Binom chat widget and initializes it" | After the window loads, passes the page address and the product_id parameter from the address to the chat. |
If Binom needs to know which product page the customer is on (Product ID). |
| 3. "…script for dynamic chat loading" | An empty container and a script that creates the chat window itself with the saved settings. | An alternative to block 1, if you prefer to paste a single line of code. |
Use either block 1 or block 3, otherwise two windows will appear on the page. Block 2 goes on the same page, below the main code.
The code in block 1 contains the attribute allow="microphone *; autoplay *". Do not remove it: without it, voice messages and voice calls via WebRTC will not work in the window.
Where to paste the code
- WordPress: open the needed page or product card template in the editor, add a "Custom HTML" block where the window should appear, and paste the code.
- Website builders: use the element for inserting HTML code in the needed place on the page.
- Custom-built site: give your developer the copied code, the addresses of the pages where the window should appear, the required window size and, if you need Product ID, block 2.
To have the window appear on all product cards, paste the code into the shared product card template, not into each page separately.
How to check the result
- Open the website page in incognito mode and scroll down to the place where the window is.
- Make sure the window is the right size and does not cover other elements on the computer and phone.
- Send a question. If block 2 is inserted, on the product page ask "Is it in stock?" without the product name: Binom should understand which product you mean.
- Find the test conversation in the Chats section.
Possible issues
The card is grey and marked "Not available on your plan"
What it means: the public chat, iFrame and Widget are part of one plan option, and it is not included in your plan. On the free Free plan, installing the widget and iFrame is not available (Free plan limitations). In the code block, instead of the code, you will see the message "Your plan does not include the widget integration".
How to move to the right plan:
- Find out which plan you need: in the Integrations section, hover over the grey card. The hint "Upgrade to plan …" will name the most affordable plan that includes this integration. To see how the Free, Basic, Pro and Business plans differ: how much Binom AI costs.
- Open Subscription. If you are on the free plan now, click "Choose plan". If you are on a paid plan, click "Compare plans".
- Choose a plan and a billing period (monthly, every 3 months or yearly) and click "Confirm and pay". The payment page will open.
- After payment, "Subscription payment successful!" will appear. Go back to Integrations → iFrame. The card will be marked "Available".
Want to try it first? The 7-day trial period includes the features of the Basic plan: how to subscribe or start a trial period. If "Payment was not completed. Your plan has not changed" appears after payment, try paying again, or write to support@binomai.com, including your account email and the chosen plan.
The message "You do not have permission to manage this section"
What it means: only users with Owner or Admin access level for the selected Binom can set up integrations.
What to do: ask the account owner to give you Admin access or to hand the task over to them. More details: team access levels.
How to tell it is resolved: after refreshing the page, the integrations catalog opens.
The window did not appear on the page
Step-by-step check: why the Binom chat does not appear on the website.
Other common questions
How do I insert the chat code into a website page?
Copy block 1 on the Integrations → iFrame tab and paste it where you need it on the page. In WordPress, use the "Custom HTML" block. If the window did not appear, see what to check.
Can I add the chat to a product card?
Yes. Insert the code into the common product card template and add code block 2 so that the chatbot for online stores that knows the product works.
