Quick Start: Embed Your Widget
Two things go on the page: the script tag (once per site) and a container div (one per widget). That is the entire embed.
Copy the embed script
Grab your workspace's embed snippet from Style tab → Display Mode inside any project, or use the example below with your publishable key.
<!-- Add once per page, before </body> -->
<script async
src="https://assets.jule.ai/widget.js"
data-api-key="YOUR_API_KEY">
</script>
<!-- Inline mode only: place where widget renders -->
<div data-jule-project="YOUR_PROJECT_ID"></div>Pre-identify known users
If the visitor is already logged in, set window.JULE_USER_DATA before the widget script loads. Jule uses the email as the Iterable user identity even if the widget has no email field — useful for post-purchase surveys or preference centers.
<!-- Set this before the widget script loads -->
<script>
window.JULE_USER_DATA = { email: "{{ current_user.email }}" };
</script>Placement modes
For Inline mode, place a <div data-jule-project="..."> exactly where you want the widget to render. It collapses to zero height until loaded.
For Popup and Banner mode, no container div is needed. The widget script loads all active popup and banner projects automatically and renders them as overlays or anchored bars. The display trigger controls when they appear.
Publish and verify
Click Publishin the Jule editor, then reload your page. The widget renders and the impression appears in the Jule dashboard's Analytics within a few seconds.