Share and embed a form
Send a direct link, embed a form in your pages, choose how and when it opens, and control it from your own code.
Three ways to use a form
- Direct link — every form has its own booking page. Share it by email, in your signature, in an ad or on social media.
- Embed it on your site — paste a short code once; the form appears in the page, as a pop-up, a side panel, a floating button or, for conversational forms, a bar at the bottom of the page.
- Let AI agents book through it — see AI in Form settings.
All three are set in the Display tab of the form page.
Choose the display mode
On the form page, open Display and pick a card:
| Card | What happens on your site | Form types |
|---|---|---|
| In the page | The form is drawn where you place the code. | Both |
| Pop-up on click | The form opens in a window over the page. | Classic |
| Side panel | The form slides in from the side. | Classic |
| Floating button | A round button stays in a corner; clicking it opens the form. | Classic |
| Bottom bar | The chat sits at the bottom of the page. | Conversational |
| Direct link | Nothing appears on your site; the form lives only at its own address. | Both |
The change is live as soon as it saves: the code on your site reads the display mode, trigger, targeting and design on every page load, so you never need to paste it again.
Share the direct link
The Link row of the Display tab shows the form's address, in the form:
https://app.asknudge.ai/<workspace>/<form>Click Open to see it as a visitor does. You can add parameters to the link:
| Parameter | Effect |
|---|---|
utm_source, utm_medium, utm_campaign, utm_content, utm_term | Saved with the lead, so you can see which campaign brought it. |
lang=fr | Opens the form in that language, when the form uses URL-parameter language detection. |
test=1 | Test mode: the lead is left out of analytics and no real booking is made. |
Embed the form on your site
Copy the code
In Display, click Edit on Trigger (the Trigger and code panel). Under Embed code, click the copy button.
Paste it
- In the page: paste the code exactly where the form should appear.
- Every other mode: paste it before
</body>, or in your site builder's custom code section.
Publish your site
Open a page where you pasted the code. The form appears with the display mode and trigger you chose.
The code looks like this:
Copy the code from the app rather than typing it: it already contains your workspace and form names. For site-builder specifics and Content Security Policy, see Installation and CSP.
Choose when it opens
The Trigger and code panel holds the opening rules.
Classic forms (pop-up, side panel, floating button)
- Trigger: Manual (API only) (opens only from your own code or button), Exit intent, Scroll depth (a percentage of the page), Time on page (seconds) or Click on element (a CSS selector such as
.book-demo). - Frequency: Once per session, Once per day, Once per week or Once ever.
- Embed design: overlay darkness, position on the page, container width, corner radius and background colour; for the floating button, its colour, size, position, offset, shape and an optional label such as "Book a call".
Conversational forms (bottom bar)
Set Desktop appearance and Mobile appearance separately: Immediate, After scrolling (%), After a delay (seconds) or After reading a section (seconds). Time counts only while the page is visible.
For every mode
- Device targeting: All devices, Desktop only or Mobile only.
- Hide if already converted: a visitor who already submitted the form or booked does not see it again.
- Wait for cookie consent: the widget waits until your cookie banner gives consent.
Control it from your own code
Optional, for developers. Under JavaScript API in the same panel:
// Open or close the form from your own buttons
Nudge.open()
Nudge.close()
// React to what visitors do
Nudge.on('form_submitted', (data) => {
console.log('Lead captured', data)
})
Nudge.on('booking_created', (data) => {
console.log('Meeting booked', data)
})A common pattern is the Manual (API only) trigger with your own "Book a demo" button calling Nudge.open().
Colours
Colours in the Display tab sets the form's main colour. For conversational forms you can also set the visitor bubble and the assistant bubble. Other visual settings (template, theme, calendar display, confirmation) are shared by all forms in Settings › Forms › Appearance.