WordPress - How to install the Bridebook Website Widget
Choose how you want the widget to appear on your website, then follow the steps for your chosen option.
Before you start
5 steps to go live
Get your widget code from Bridebook Business
Log into Bridebook Business and head to the Website Widget section. You will find your unique embed code ready to copy. This code is specific to your venue — do not share it or use someone else's.
<iframe width="100%" height="600"
src="https://enquiry.bridebook.com?publicId=YOUR_VENUE_ID&widgetId=YOUR_WIDGET_ID">
</iframe>Open your WordPress dashboard and go to Pages
Log in to your WordPress admin at yoursite.com/wp-admin. Once inside, hover over Pages in the left sidebar and click All Pages to see every page on your site.

Open the page you want to edit
Find the page where you want the widget to appear and click Edit. Most venues add it to their Contact page, but you could also create a dedicated "Book a Viewing" page if you want to keep it separate.

Add a Custom HTML block
In the block editor, click the + button to add a new block. In the search bar, type html and select Custom HTML from the results. This is the block that lets you paste raw code directly onto your page.
Can't find it?
Make sure you are in HTML view inside the block, not Preview. The block looks like a small code tag icon in the block library.
Paste your code and save
Click inside the Custom HTML block and paste the iframe code you copied from Bridebook Business. Do not add any extra spaces or line breaks around it. Then click Save in the top right corner, and open your page in a new tab to confirm the widget is showing.
What to look for
The Bridebook form loads directly on your page
Couples will see options to book a showround, register for an Open Day, or send an enquiry. Every submission lands in Bridebook Business tagged as Website Widget.
Not showing up?
Clear your browser cache or open the page in a private window. If the widget is still missing, check the code was pasted without any changes to the URL or spacing.
Before you start
How the popup works
The popup widget has two parts. First you add a script to your site's header using the Code Snippets plugin. Then you add a button to any page. When a couple clicks it, the Bridebook form opens in a popup overlay. Your existing page design stays exactly as it is.
4 steps to go live
Get your script from Bridebook Business
Log into Bridebook Business and go to the Website Widget section. Copy your unique script tag. This is different to the embedded widget code — it is a single line starting with <script rather than an iframe.
<script src="https://enquiry.bridebook.com/widget.js"
data-public-id="YOUR_PUBLIC_ID"
data-widget-id="YOUR_WIDGET_ID"
defer></script>Add the script to your site's header using Code Snippets
The script needs to be loaded in your site's <head> so it is available on every page. The easiest way to do this in WordPress is via the Code Snippets plugin.
In your WordPress dashboard, click Code Snippets in the left sidebar, then click Add New.
Give your snippet a name (e.g. Bridebook Widget), paste your script code into the code editor, and set the snippet type to HTML. Then set the location to Site-wide header so it loads on all pages.
Click Save Changes and Activate. The script is now running on your site.
Good to know
The script loads silently in the background. Nothing will appear on your site until you add a button in the next step.
Add a button to your page
Go to the page you want to add it to and open it in the block editor. Add a Custom HTML block by clicking the + button, searching for "html", and selecting Custom HTML. Then paste the button code below into it.
Option A — Bridebook branded button
Use this if you want to get up and running quickly. It matches Bridebook's colour and style and works straight away.
<button data-bb-open style="background-color:#4D52E3;
color:#fff;padding:12px 24px;border-radius:30px;
border:none;font-size:15px;font-weight:700;
cursor:pointer;">Book a viewing</button>Preview of how the button will look
Option B — Match your own brand
Change the colours, font size, and label text to match your venue's style. The only thing you must keep is data-bb-open — that is what connects the button to the Bridebook popup.
<button data-bb-open style="background-color:#YOUR_COLOUR;
color:#YOUR_TEXT_COLOUR;padding:12px 24px;
border-radius:8px;border:none;
font-size:15px;font-weight:700;
cursor:pointer;">Your button label</button>The one rule
You can change anything about the button's appearance, but data-bb-open must stay on the button element. Without it the popup will not open.
Save and test it
Click Save in the top right of the editor. Then open your page in a new tab and click the button. The Bridebook form should open in a popup overlay on top of your existing page.
What to look for
The Bridebook form opens in a popup when the button is clicked
Couples can book a showround, register for an Open Day, or send an enquiry without leaving your page. Every submission lands in Bridebook Business tagged as Website Widget.
Popup not opening?
Check the Code Snippets snippet is active and set to Site-wide header. Then confirm the button code includes data-bb-open exactly as shown. Clear your cache and try again.
Works with
Ready to go?
Set up your widget in Bridebook Business
Get your unique code, choose your widget type, and go live. Every enquiry lands in Bridebook Business automatically, tagged by source and ready to action.
Set up your widget →