Install the booking form
Add the Nudge booking form to your Contact page with one tag, as a form in the page, a button that opens it, or a link to share.
What the booking form is
Besides the chat bar, the Website Agent has a second display: the booking form, made for your Contact page. Visitors enter their details, then pick a time slot. Bookings and contacts land in the same place as the chat's: Bookings and Contacts.
To set up its questions and booking rules, see the Website Agent section. This page covers putting it on your site.
Before you start
The booking form is displayed by the same Nudge script as the widget. Install the widget snippet on your site first (see Install the website agent). You then only add one short tag on your Contact page: no second script.
Get the tag
Open the booking form
In Nudge, go to Agents › Website Agent › On your site. On the Booking form row, click Configure.
Open the install window
Click Install on my site. The Install the form window opens.
Choose where to show it
Under Where to show it, pick one of three options:
| Option | What you get |
|---|---|
| In the page | The form is displayed inside your page, where you paste the tag. |
| Button that opens it | A button. One click opens the form over the page. |
| Link to share | A link that opens the form on a page of its own, without your site around it. |
Choose your site and copy
Under Your site, pick Framer, WordPress, Webflow or HTML code: the tag is the same, only the instructions change. Click Copy the code (or Copy the link).
The tags
The value is your booking form's identifier; the app fills it in for you.
<div data-nudge-form="your-booking-form"></div>The form takes the full width of its container, and its height adjusts to its content.
Where to paste it
Paste the tag on your Contact page, where the form should appear:
| Site | Where |
|---|---|
| Framer | Add an Embed block to the Contact page, then paste the code. |
| WordPress | Add a Custom HTML block to the Contact page, then paste the code. |
| Webflow | Add an Embed element to the Contact page, then paste the code. |
| HTML code | Paste the code into the Contact page's HTML, where the form should appear. |
The button can go anywhere: in a header, a pricing section, several pages.
Then publish the page.
Check the installation
- Open the published Contact page once in your browser.
- In the install window, click Check the installation.
When the form has been seen on a page, Nudge shows "Form detected on your … page", and the booking form's header switches from Not installed yet to Installed on your site. The Booking form row of On your site shows Installed.
If Nudge answers "Not detected yet": publish the page, open it once in your browser, then check again. If your site's Content Security Policy blocks Nudge, the window lists the sources to add: see Content Security Policy.
Good to know
- The script must be on the page. The tag alone shows nothing: the Nudge snippet installed site-wide is what finds the tag and displays the form. If the widget is paused, or your workspace has no active plan, the script loads nothing and the form does not show either.
- Excluded pages still show the form. If you hide the chat bar on your Contact page with an excluded URL pattern, the booking form you placed there still shows.
- Pages built after load are supported. The form also appears when your site builder adds the block after the page has loaded, or when visitors navigate inside a single-page site.
- One workspace. The tag only displays a booking form of the workspace the snippet belongs to.