Diobox allows you to sell tickets or collect registrations directly on your own website. Instead of sending guests to a separate page, the registration or ticket form opens in a secure modal window on top of your site.
All payments and submissions are processed securely on Diobox’s backend, while your guests remain on your website throughout the experience.
How the Embedded Experience Works
After you place the embed code on your website:
A button appears on your page, such as “Register” or “Buy Tickets”.
When a guest clicks the button, a modal window opens on top of your site.
The background of your website is dimmed while the form is displayed.
Guests complete registration or payment inside the modal.
A confirmation message is shown and the standard Diobox email receipt is sent.
Guests close the modal and continue browsing your site.
From the guest’s perspective, the entire process feels native to your website.
Embed a Single Ticket or Form
Use this option if you want to display a button for a specific ticket or form.
Where to find the embed code
Select the form and click More → Embed Form. You will then find the two code snippets, which you can copy.
Where to place the code
1. Script in the <head> section
The first snippet must be added inside the <head> section of your website’s HTML.
The <head> section loads important scripts before the page is displayed. Adding the script there ensures the Diobox button and modal work correctly when someone clicks it.
This script only needs to be added once per page, even if you place multiple ticket buttons on that page.
2. Button where you want it to appear
The second snippet is the button itself. Place it anywhere in your HTML where you want the button to display, for example inside a section, column, or content block.
You can change the button text by editing the label between the tags:
<dio-button ticket="FORM-ID">Buy Tickets</dio-button>
Replace the text with any label you prefer, such as:
Get Ticket
Reserve Your Spot
Register Now
You can embed multiple ticket buttons on the same site. Simply reuse the button snippet for each form. The script in the <head> still only needs to be included once.
Embed a Button That Shows All Public Tickets
If you want one button that opens a modal displaying all public forms for the event:
Go to Event Settings → Embed Code.
You will see two snippets:
One script for the
<head>sectionOne button that opens all public forms
Place them the same way as described above. When clicked, the modal will show all available public tickets and forms for the event.
Customize the Button Style
You can customize the appearance of the button using the style attribute inside the <dio-button> tag.
Example 1
Default button style without specifying any attributes.
<dio-button ticket="FORM-ID">Register</dio-button>
Example 2
Customizing the button style.
<dio-button
ticket="FORM-ID"
style="background-color: #0462B8; color: white; border: none; padding: 10px 20px; font-family: 'Roboto', sans-serif; font-size: 22px; cursor: pointer; border-radius: 25px;">
Register
</dio-button>
This example includes attributes to change:
Button color
Button padding
Text color
Font size
Font family
Border style
Corner roundness
If you are not familiar with HTML styling, you can copy the example and adjust only the color values and font size. For example, replace the background color with your brand color using a hex code such as #F48437.
If your website uses its own CSS styles, your developer can also target the <dio-button> element and style it globally instead of using inline styles.
By embedding tickets directly on your site, you maintain a consistent brand experience while using Diobox’s secure registration and payment infrastructure.