If you have visitors on your website that you want to bring to your Instagram contacts, you can insert the HTML Widget trigger.
Users can click the code to copy it and send it to you on Instagram to trigger the automation scenario.
Create an automation and trigger
Create a new Custom scenario and choose the HTML Widget trigger.
Customize the widget's text
In the scenario, you can configure your widget to change the text and button.
Embed the widget on your website
Copy the HTML code and paste in on your website where you need it to appear.
The widget has 2 HTML tags:
the
<script>tag to import the JS script (~2kB)the
<inro-widget>web component tag with custom attributes
💡 If you insert the widget multiple times per page, you might want to separate the <script> part and insert it only once in your <header> tag.
Optional: customize the widget with CSS
If you want to customize the widget's appearance, you need to toggle the option before copying the code.
You can also manually add the mode="custom" attribute to the <inro-widget> tag.
You can then add CSS styles to your website to target the widget's elements.
Here is the list of available CSS classes that you can extend:
inro-widgetthe container itselfinro-headerthe top textinro-code-containerthe container for the code and copy iconinro-codethe code itselfinro-iconthe copy icon
inro-button the buttonto Instagraminro-button-iconthe button's iconinro-button-textthe button's text
Optional: insert data in your code to use it in the automation
You can insert data from your website into the widget and code so it can be received on Inrō's side when the scenario is triggered.
Insert data from your website
Simply add a data- attribute to the <inro-widget> tag and insert any data you need.
Here is an example using Liquid syntax to insert product information on a Shopify website:
<inro-widget
code="IG_3741"
username="inro.social"
data-product="{{ product.title }}"
></inro-widget>
⚠️ Do not remove or change the code and username attributes as they will prevent the widget from working.
Please note that this will make the code much longer, depending on how much data you insert.
IG_3741 > IG_3741_52HBn5FpMfOVnxe2nSo0xv0dIBKUyALHaruqmjrx5aPyrdom5v
Access data in the automation scenario
In your automation, you can now access the data from your code using variables.
The data- attributes are available using the {{ widget.key }} variable syntax. You can use it in most actions like DMs, HTTP Requests, Update contact property, etc.
Using the Shopify example from above, here is how you would access the data-product attribute in your automation.
