Website Widget
Simple Installation Guide
What the widget lets couples do
- ● Send an enquiry
- ● Book a viewing
- ● Register for an Open Day
Before you start
Find your widget code in: Bridebook Business → Grow your business → Website widget → Install
Or go straight there: Get your widget code
Two ways to add the widget
Embedded
The widget sits directly on your page, visible straight away — like a contact form built into the site.
Always visiblePop-up
The widget opens when a couple clicks a button — like "Book a viewing" or "Send enquiry".
Opens on click
Not sure which to use? Embedded works best for contact and enquiry pages. Pop-up works best when you already have buttons on your site.
Add the widget directly to a page (Embedded)
Use this option if you want the widget to appear on the page straight away.
Good pages for the embedded widget
Step 1 — Copy your embedded code from Bridebook
- 1Go to Bridebook Business
- 2Open: Grow your business → Website widget → Install
- 3Choose the embedded option
- 4Copy the code
It will look similar to this:
<iframe
width="100%"
height="600"
src="https://enquiry.bridebook.com?publicId=YOUR_PUBLIC_ID&widgetId=YOUR_WIDGET_ID">
</iframe></iframe> not />. A self-closing iframe can break the rest of your page.Step 2 — Paste the code into your website
- 1Open your website editor
- 2Go to the page where you want the widget
- 3Add a custom HTML block or custom code block
- 4Paste the full code into it
Step 3 — Publish and check
- 1Save and publish the page
- 2Open the page and confirm the widget appears
- 3Send a test enquiry and check it arrives in Bridebook Business
Make a button open the widget (Pop-up)
Use this option if you already have a button on your website and want it to open the widget.
Good button text
Good pages for the pop-up
Step 1 — Copy your pop-up script from Bridebook
- 1Go to Bridebook Business
- 2Open: Grow your business → Website widget → Install
- 3Choose the pop-up option
- 4Copy the script code
It will look similar to this:
<script
src="https://enquiry.bridebook.com/widget.js"
data-public-id="YOUR_PUBLIC_ID"
data-widget-id="YOUR_WIDGET_ID">
</script>Step 2 — Add the script to your website
Paste the script into the <head> section of your website:
<head>
Paste the Bridebook script here
</head>Step 3 — Connect a button to open the widget
- 1Find the button or link that should open the widget
- 2Add the attribute
data-bb-opento it
Examples:
<a href="#" data-bb-open>
Send enquiry
</a>
<button data-bb-open>
Book a viewing
</button>Step 4 — Publish and check
- 1Save and publish your website
- 2Click the button and confirm the widget opens as a pop-up
- 3Send a test enquiry and check it arrives in Bridebook Business
If it does not work
- ☐ Are
data-public-idanddata-widget-idstill in the code? - ☐ Did your website builder remove part of the code?
- ☐ Did you copy the full code from Bridebook?
- ☐ Did you paste the code into a custom HTML or code block?
- ☐ Did you publish the website page?
- ☐ If using pop-up mode, did you add
data-bb-opento the correct button?
/> instead of </iframe> can break the rest of your page. Always close the iframe tag properly.What to send your website developer
If you need help installing, copy and paste this message to your developer:
Copy this message
We would like to use:
[Embedded widget / Pop-up widget]
Bridebook has provided this installation code:
[paste your code here]
For pop-up mode, please add data-bb-open to the button that should open the widget.
Ready to get started?
Get your widget code from Bridebook Business and start capturing enquiries from your website.
Get your widget code