Embedding

Two ways to add StickyCTAs to your website.

Method 1: Direct HTML

Copy your embed snippet from the dashboard and paste it into the <head> or just before </body> on every page where you want the widget to appear.

<script src="https://www.stickyctas.com/widget.js" data-widget-id="YOUR_WIDGET_ID" async></script>

The async attribute ensures the script loads without blocking your page. The entire widget script is roughly 3 KB gzipped.

Method 2: Google Tag Manager

If you use GTM to manage your scripts, follow these steps:

Step 1

In your GTM workspace, click Tags → New.

Step 2

Choose Custom HTML as the tag type.

Step 3

Paste the following snippet into the HTML field:

<script>
(function() {
  var s = document.createElement('script');
  s.src = 'https://www.stickyctas.com/widget.js';
  s.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
  s.async = true;
  document.head.appendChild(s);
})();
</script>

Note: GTM requires dynamically injecting the script. A plain <script src> tag won't work in Custom HTML tags.

Step 4

Set the trigger to All Pages.

Step 5

Save the tag and click Submit to publish your container.

After installing, connect GA4 to track widget clicks and conversions.

How it works under the hood

  1. The browser loads widget.js asynchronously from stickyctas.com.
  2. The script reads the data-widget-id attribute to identify your widget.
  3. It fetches your widget configuration from the API.
  4. It renders the floating CTA button and popup on the page.

Troubleshooting

Widget doesn't appear

Make sure the widget is in Live status (not Draft). Check that the snippet is placed on the correct page and that the widget ID is correct.

Widget appears but actions don't work

Verify the values in your action buttons. Phone numbers should include the country code. URLs should start with https://.

Widget is hidden behind other elements

The widget uses a high z-index by default, but some themes or plugins may conflict. Check for CSS that might be overriding the widget's positioning.