The HTML Widget puts a small button on your website that sends visitors into an Instagram conversation with you, and fires a scenario automatically when they message you. It's a clean bridge between your website traffic and your Inrō automations, and it works on every plan.
How it works
A visitor clicks the widget on your site, lands in your Instagram DMs with a code already filled in, and sends that code. Inrō matches the code, runs your scenario, and takes the conversation from there.
Step 1: Create a scenario with the HTML Widget trigger
Go to Automation → Scenarios and create a new Custom scenario. In the trigger picker, choose Others → HTML Widget code is sent.
Step 2: Customise the widget text
In the trigger's configuration panel, set:
Header text: the line above the code (for example, "Get your free guide on Instagram").
Button text: the label on the send button (the default is "Send code").
A live preview shows how the widget will look.
Step 3: Copy and embed the code
When you're happy with the text, copy the embed code. It has two parts:
A
<script>tag that loads the widget.An
<inro-widget>tag that defines your specific widget.
Paste both wherever you want the widget to appear.
⚠️ Don't change or remove the code and username attributes inside the <inro-widget> tag. The code identifies which scenario to fire, and username is your Instagram handle that the button links to. Without username, the button has nowhere to go.
If you're placing the widget more than once on a page, you can include the <script> tag once in your <head> and repeat only the <inro-widget> tag where you need it.
Optional: style the widget with custom CSS
To match the widget to your site, toggle Enable styling with custom CSS before copying the code. This adds mode="custom" to the tag, which lets your site's stylesheet target these classes:
inro-widget(the outer container)inro-header(the header text)inro-code-container(wraps the code and copy icon)inro-code(the code itself)inro-icon(the copy icon)inro-button(the send button)inro-button-icon(the button icon)
Optional: pass data from your website into the scenario
You can attach data from the page to the widget so it's available as a variable inside your scenario. Add a data- attribute with any key and value.
For example, on a Shopify product page:
<inro-widget code="IG_3741" username="yourusername" data-product="{{ product.title }}"></inro-widget>
Inrō folds that data into the code the visitor sends. Inside your scenario, read it with {{widget.key}}, so the example above gives you {{widget.product}}.
⚠️ Data attributes make the code longer, because the value is folded into the code the visitor sends (so IG_3741 might become something like IG_3741_52HBn5FpMfOV…). Short values like a product title are fine, but very long strings make for an unwieldy code. For the full list of variables, see Variables & Personalisation Guide.
🐾 Netsuke's Tips
The widget works best on specific, high-intent pages: product pages, pricing pages, a blog post with a lead magnet. On the homepage alone it usually underperforms.
Use
data-attributes to carry context into the scenario. If someone clicks from your pricing page, pass the page name so your first DM can say "Thanks for reaching out from our pricing page."Unlike referral links, the HTML Widget works on both Instagram mobile and Instagram web, so it fires no matter how the visitor opens the DM.
Test it before you publish: click your own widget, send the code, and confirm the scenario runs.
What's next?
For other ways to start a scenario from outside Instagram, see Webhook Triggers: Fire Scenarios from External Apps and Triggers: The Complete Reference.