Overview

The Custom/Webflow widget allows you to dynamically inject content directly into your custom web designs rather than using one of our default blob, banner, or toast widgets.

This approach gives you complete control over styling and placement of widget content within your existing design system.

Key Benefits

How It Works

  1. Create a widget in your dashboard as usual
  2. Set the widget type to "Webflow" in your widget settings
  3. Add the widget script to your website
  4. Add data attributes to your target HTML elements in the Webflow designer
  5. When the page loads, the script will find elements with these attributes and replaces their content with your widget content

Data Attributes

Attribute Description Example Elements
data-widget-title Replaced with widget title Headings, spans, div elements
data-widget-description Replaced with widget description Paragraphs, spans, div elements
data-widget-cta-text Replaced with call-to-action text Buttons, links, spans
data-widget-cta-url Sets the href attribute to your CTA URL Links, buttons
data-widget-image Sets the src attribute to your widget image Image elements
data-widget-container Marks element as container to show/hide Modals, popups, sidebars
data-widget-open-trigger Shows container element when clicked Buttons, links, any clickable element
data-widget-close-trigger Hides container element when clicked Close buttons, modal overlays

Quick Copy Attributes

Here are all the attributes you can copy and paste directly into Webflow's custom attribute fields: