Skip navigation
User Manual
Overview

Widget

After you create a Form, host it on your website is with the Widget. There are multiple ways to trigger the widget to web visitors, such after time delayed, exit intent, link URL, or JavaScript API.

To host a Widget, install your Drip JavaScript snippet on your website. You can find your JavaScript snippet under Site Setup in your account settings.

Create a Form Widget

  1. Click Forms

  2. Click + New Opt-In Form

  3. Give the form a name

  4. Click Create Form

Once created, you'll land on the screen to customize the design and configuration, decide how to host it on your website, and activate the form.

Enable a Form Widget

The setting to enable a form widget.

  1. From inside the form builder, click Design
  2. Toggle on Enable Form Widget

Trigger a Form Widget

There are multiple ways to trigger a widget to visitors of your website. Configure the widget trigger point under the Design tab.

Time Delay

A form widget set to Time Delay.

Specify the number of seconds to delay a widget before it appears to a website visitor.

To show a widget after a time delay:

  1. Toggle on Enable Form Widget

  2. Click Time Delay

  3. In Behavior, specify the number of seconds

Exit Triggered

A form widget set to Exit Intent.

Show a widget only when a site visitor exhibits "exit intent." Exit intent is when a site visitor drags their cursor outside of the web browser used to access your website, showing intent to leave your site.

To show a widget on exit intent behavior:

  1. Toggle on Enable Form Widget

  2. Click Exit Triggered

While set to show on exit intent, the widget's orientation defaults to lightbox positioning. 

Widgets set to Exit Triggered or Lightbox orientation do not appear on mobile devices.

Link URL

The HTML anchor tag to trigger a widget with link URL.

Copy and paste a provided anchor tag to integrate into the codebase of your website. The given anchor is constructed in HTML and may require a developer to integrate into your codebase.

To trigger a widget with a link URL:

  1. Toggle on Enable Form Widget

  2. Under Design, click Behavior

  3. Copy the HTML anchor tag

  4. In your codebase, paste the anchor tag

Anchor Tag

Set your own trigger point with an anchor tag.

  1. Create an anchor tag at the point you choose on your page

  2. Copy the tag you’ve created

  3. Go to Forms

  4. Select your form

  5. Under Design, go to Behavior

  6. Check the Show when user scrolls to… box

  7. Select the drop-down and choose anchor

  8. Paste your anchor tag in the anchor field

  9. Click Save Settings

Your widget will now appear when you scroll to the anchor tag you’ve set on your website page.

JavaScript API

Make requests to our JavaScript API to open and close a widget with the following methods:

_dcq.push(["showForm", { id: "9999999" }]);

_dcq.push(["hideForm", { id: "9999999" }]);

For more information about our JavaScript form methods, read through our developer docs section about how to handle forms.

 

Widget Orientation

Widget Orientation

In the Orientation settings for a Widget, specify where the form should appear on your website.

Left Side Tab

Places the widget to the upper left side of a web page, slightly off center.

Lower Right Tab

Places the widget to the bottom right of a web page. This is the default setting when a new form is created.

Lightbox

Appears after the default time delay of ten seconds in the middle of the screen. This orientation setting is also the default setting when a widget is set to Exit Intent.

Lower left tab

Places the widget to the lower left side of a web page.

Right Side Tab

Places the widget to the upper right side of a web page, slightly off center.

After the Orientation setting is selected, click Save Settings.

Widget Appearance

The Appearance setting for a form widget.

Customize the font color and widget tab color, set font size, opacity, and placement of form field labels.

Design

There are two versions of the Widget design, Simple and Classic, which differ slightly in appearance from each other.

  • Classic is surrounded by a border that inherits its color from the Tab Color setting.
  • Simple does not include the surrounding border and is the default setting when a new form is created.

Tab Color

Set the color of the tab for a widget with the color picker. Click on the setting and hover your cursor over the color picker to manually adjust the color, or enter the #hex code of the color to use. The tab color is only visible in both the classic and simple design when the widget is in the closed position.

Headline Color

Select the color of the widget headline text. Click on the setting and hover your cursor over the color picker to manually adjust the headline color, or enter the #hex code of the color to use. Headline color applies to both the classic and simple widget designs. When the widget is in the closed position, the headline color defaults to the color white.

Font Size

The font size of the widget headline, description, input field, and button text are set through this setting. Click the drop-down to select a new font size for the text elements in the widget. This setting cannot be manually set. Font size applies to both the classic and simple widget designs.

Opacity

Apply an opaque background to the widget tab while in the closed position.

Widget Behavior

The behavior settings for a Form Widget.

Set when you want your form to appear and other behavior settings for a form under the Behavior tab.

When do you want your form to appear?

Check the box to Wait a set number of seconds before the form pops up on your site.

Check the box to Show when user scrolls to and select a percentage from the drop-down menu.

Enter the number of days before the form should pop up again after the form first pops up and after a user manually closes the form.

Widget Visibility

The Visibility settings for a Form Widget.

Select which pages to hide or show your Form on your website under the Visibility tab.

  1. Go to Design > Visibility

  2. Check Hide on specific pages or Only show on specific pages

  3. Enter the URL

  4. Click Save Settings

Use a Wildcard to hide or show entire subdirectories on your website.

x A browser window showing the Drip Swag Shop

Wanna see Drip from a fresh angle?

Craving a more hands-on experience? Take 2 minutes and see what your shoppers see when you use Drip with this interactive experience.

Start my experience