Your First Widget

8 min readUpdated June 2026

Build, style, and publish a lead-capture widget end to end. This walkthrough creates a simple email + phone opt-in that pushes subscribers to Iterable and fires a Journey trigger.

Create a new project

From the Projects page, click Create New Project in the top right. A two-step modal appears: first name the project, then choose a template.

Name it something descriptive — Summer Newsletter Signup, for example. This name appears in your project list and as the label in Analytics.

Pick a template

Choose Widgets to build pop-ups, inline forms, banners, and floating bubbles — or Preference Center for a full-page subscription preferences flow. Click Next to open the editor.

Create New Project — Select Project Type modal — Select a project type — Widgets for pop-ups and forms, Preference Center for subscription management.

Add elements

In the editor, open the Pages tab and click + Add Element. The element picker shows all available inputs and content blocks. For a basic opt-in, add:

Email — set Field Name to email. This is the Iterable user identity key.
Phone — set Field Name to phoneNumber.
Button— label it "Subscribe".

Element picker in the editor — The element picker — Form Elements on top, Content Elements below. Drag or click to add.

Field names matter.Jule sends each element's Field Name as a key in the Iterable dataFields payload. Match your Iterable user profile keys exactly.

Switch to the Style tab. Set Display Mode to Popup, Inline, or Banner, then adjust card colors, border radius, and padding. The live canvas on the right updates in real time.

Style tab in the editor — Style tab — Display Mode, Template Layout, Card Styles, and Effects are all configurable here.

The Style tab also shows your embed snippet. Copy the <div data-jule-project="..."> tag — you'll need it in step 6.

Set a display trigger

Switch to the Triggers tab. Select a trigger from the dropdown — for a newsletter pop-up, Exit Intent or Time Delay (5s) are good starting points. Click Manage Triggers to create a new one if needed.

Triggers tab showing no trigger selected — Triggers tab — choose an existing trigger or manage triggers to create URL-match and scroll-depth rules.

Some triggers don't work in Inlinemode — exit intent and time delay apply to popups only. A warning banner appears in the editor if there's a mismatch.

Publish

Click Publishin the top right. Paste the embed snippet from step 4 into your site's HTML. On the next page load, the widget renders and starts syncing submissions to Iterable.

Submit a test response from your site. Within seconds you should see the user created or updated in Iterable — and, if the Track Custom Event action is enabled, a custom event with your configured name (default form_submission) in their activity timeline.