Embed a Booking Page

Use the Website Widget to place a booking link directly on a webpage. Dlopo generates the HTML and script configuration for the selected link, including its owner, slug, target element, and height.

Before You Begin

You need:

• An active, publicly available booking link.
• Permission to edit your website’s HTML or custom-code area.
• A page that allows external scripts.
• The generated embed code from Dlopo.

Draft links cannot be published through the widget. If the link cannot be publicly activated under the current plan, Dlopo keeps sharing and embed controls disabled.

Generate the Website Widget

1. Open Links.
2. Select the booking link you want to embed.
3. Choose Website Widget under Distribution.
4. Set the Height in pixels. Dlopo accepts a value between 420 and 1200.
5. Review the generated HTML Code.
6. Click Copy Code.

Use the generated code as one complete block. It creates the target element, defines the Dlopo embed configuration, and loads the current embed script.

Add the Code to Your Website

1. Open the intended page in your website builder or codebase.
2. Add an HTML or custom-code block where the booking flow should appear.
3. Paste the complete Dlopo code.
4. Save and publish the page.
5. Open the published page in a new browser session.
6. Complete a test booking inside the embedded flow.

Do not change the generated owner username, booking-link slug, selector, or script URL unless you are intentionally rebuilding the integration.

The embed points to the live booking link rather than copying its configuration into your website. Saved changes to the title, description, availability, questions, and location therefore appear in the embedded experience without replacing the snippet. A changed booking-link URL requires new generated code.

Adjust the Height

The Height value controls the vertical space reserved for the embedded booking flow. Increase it if the booking interface is clipped or creates an internal scrollbar. Test the page at desktop and mobile widths.

Your website’s container can still constrain the widget. Check parent width, overflow, and responsive styles if the embed does not fill the expected area.

What Guests Experience

Guests use the Dlopo booking flow without navigating away from your site. Availability, time zones, questions, assistant access, integrations, and booking validation behave like the direct booking page.

The embedded flow still connects to Dlopo. Your website should allow the generated script and frame to load.

Content Security and Privacy

If your site uses a Content Security Policy, allow the Dlopo script and booking-frame origin used by the generated code. Cookie or tracking restrictions on your site can also affect embedded behavior.

Do not place the website embed code in an email. Email clients commonly remove scripts. Use Email Snippet or the direct booking URL instead.

If the Widget Does Not Load

Check that:

1. The booking link is active and public.
2. The full generated code was pasted.
3. The target element ID was not changed.
4. The script URL was not blocked.
5. The page was republished after editing.
6. Your site’s Content Security Policy allows the embed.
7. The selected height is large enough.