Widget Installation¶

This guide explains how to add the Rose widget to your website.

Quick Start¶

Choose one of the two installation methods below. Both achieve the same result.

Method 1: Two Script Tags (Recommended)¶

Add these script tags to your page's <head> section:

<!-- Rose Widget Loader -->
<script src="https://cdn.userose.ai/loader/rose-loader.js"></script>
<script>
  window.InboundXLoader.init({
    api_key: 'YOUR_API_KEY',
    api_host: 'https://api.userose.ai/rose',
    cdn_url: 'https://cdn.userose.ai/widget/production'
  });
</script>

Replace:

YOUR_API_KEY with your Rose API key (provided by Rose)

Configuration Options¶

Option	Required	Description
`api_key`	Yes	Your Rose API key
`api_host`	Yes	Rose API endpoint
`cdn_url`	Yes	Widget assets URL
`debug`	No	Set to `true` for console logging

Method 2: Dynamic Loading¶

Use this method for Tag Managers (GTM) or platforms that require a single script block:

<script>
(function(){
  var script = document.createElement("script");
  script.src = "https://cdn.userose.ai/loader/rose-loader.js";
  script.onload = function(){
    window.InboundXLoader.init({
      api_key: "YOUR_API_KEY",
      api_host: "https://api.userose.ai/rose",
      cdn_url: "https://cdn.userose.ai/widget/production"
    });
  };
  document.head.appendChild(script);
})();
</script>

Replace:

YOUR_API_KEY with your Rose API key

Which Method Should I Use?¶

Scenario	Recommended Method
Standard website (WordPress, Webflow, etc.)	Method 1 (Two Script Tags)
Tag Manager (GTM, Segment)	Method 2 (Dynamic)
Framer, Squarespace, Wix	Method 2 (Dynamic)
Single Page Applications (SPA)	Method 2 (Dynamic)

Platform-Specific Instructions¶

Google Tag Manager (GTM)¶

Create a new Custom HTML tag
Paste the Method 2 code
Set trigger to All Pages or your preferred trigger
Publish the container

WordPress¶

Option A: Theme Header

Add Method 1 code to your theme's header.php before </head>

Option B: Plugin

Use a plugin like "Insert Headers and Footers" to add the code

Webflow¶

Go to Project Settings → Custom Code
Paste Method 1 code in the Head Code section
Publish your site

Verification¶

After installation, verify the widget is working:

Open your website in a browser
Look for the search bar at the bottom of the screen

Troubleshooting¶

Widget may be hidden - Depending on your configuration, the widget might start in a hidden state. Look for a small invisible clickable square at the bottom-left corner of the page and click it to expand the widget.
Traffic control - The widget may not display for all visitors due to traffic allocation settings. See Traffic Control to learn how to force widget display for testing.
Check network requests - In Developer Tools → Network tab, verify both rose-loader.js and inboundx-widget.js load with status 200.
Check Console for errors - Look for red error messages in Developer Tools.
Verify API key - Ensure your API key is correct.

Debug Mode¶

To see detailed logs, enable debug mode:

Add data-debug="true" (Method 1) or debug: true (Method 2)
Open Developer Tools → Console tab
Look for [InboundX Loader] messages

For more help, contact your Rose account manager.