How To Sell Tickets On Webflow
This post assumes you have general knowledge of the Webflow platform.
This post will instruct you on how to sell tickets to events using the Webflow platform via Ticket Tailor. We will be embedding code that is given to us by TicketTailor into a Webflow website.
This embed method will not force users to leave your Webflow site to complete the transaction. Instead, the TicketTailor payment and information collection will happen within your site. This can help reduce sales friction that occurs when directing a user away from your site.
You will need:
- Webflow account with a project that has a paid site plan.
- Ticket Tailor account.
Create An Event On Ticket Tailor
Here we’ll create an event and then use the embed code from that event in our Webflow site.
From the Ticket Tailor dashboard click on Add new event.
Proceed through the event creation steps. Once through, publish your event and return to the dashboard.
From the dashboard, click on your published event and find the embed booking widget button on the details page.
From the embed widget page you can alter the styling and change a few options to help make the widget blend in with your site better. For this article we’re only going to focus on embedding the widget.
Leave the selector set to For HTML Websites and and copy the code in the text area.
From here we move over to Webflow to paste the code into our website.
Embed The Ticket Widget Into Webflow
In order to embed the widget your site must be on a paid site plan of basic or higher.
Within the Webflow designer navigate to the page that you would like to sell your tickets on. Insert a div block. Inside that div block insert an embed block.
Paste the embed code you copied from Ticket Tailor into the block on the canvas.
Click Save & Close. You’ll now see a message inside the embed block that lets you know you must publish your webpage before you will see the embed in action. The publish can be to your webflow url or a custom domain, it just must be to a live url i.e. you can’t view the embed inside the designer preview.
Once published go to your published url and navigate to the page with the embed and you should see your ticket buying options.
And there you have it. Just be sure to test your embed across all screen size layouts, particularly mobile. It will fit, but you might have to tweak the margins/padding of your containing element.
