1. Home
  2. Sell tickets on your website
  3. Webflow
5,000+ organizers trust Hi.Events

Sell tickets on Webflow
One Embed element.

Webflow does not sell tickets, but its Embed element runs any HTML. Paste the Hi.Events widget into one, publish, and checkout opens in a pop-up over your Webflow page.

Create your event freeJump to the steps →

One Embed element, on any site with a Site plan.

§ 01 · Before you start

What you need

Nothing to install on Webflow. The widget is a few lines of HTML that Hi.Events generates for you.

  • A Hi.Events event, published, with at least one ticket type on sale
  • Designer access to the Webflow site
  • A Site plan, or a Workspace plan that allows custom code (see below)

Which Webflow sites can run the widget

Webflow says the Code Embed element is available if you have a Core, Growth, Agency or Freelancer Workspace, or if your site has an active Site plan. The element supports HTML and script tags and takes up to 50,000 characters, which the widget snippet is nowhere near. Site-wide head code lives in Site settings > Custom code.

§ 02 · Steps

How to sell tickets on Webflow

5 steps, with the exact menu path in Webflow for each one.

  1. Copy the code from Hi.Events

    Open your event in Hi.Events and click Widget Embed under Integrations. Set up the widget and save it with a name. Under Add to your site, choose Webflow in Where is your website? and copy the code. It already contains your event and widget IDs.

    Hi.Events > Your event > Integrations > Widget Embed

  2. Add an Embed element where tickets should appear

    In the Designer open the Add panel and drag an Embed element into the section where tickets should show. It behaves like any other element, so you can size it and put it in a grid or container.

    Add panel > Embed

  3. Paste the code into the element

    The code editor opens when you add the element. Paste the code, the div and the script line under it, and click Save & Close. Check the result on the published site rather than the Designer canvas.

  4. Optional: load the script once in the site head

    If you use the widget on several pages, you can paste the script line into the Head code field in Site settings > Custom code instead, and keep only the div in each Embed element. To load it on one page only, use that page's settings.

    Site settings > Custom code > Head code

  5. Publish and run a test checkout

    Publish the site, open the page and buy a ticket. Checkout opens in a pop-up over your Webflow page. Refund the test order from the Hi.Events dashboard.

§ 03 · The code

The embed code, and where it goes on Webflow

The Widget Embed page in Hi.Events generates it with your widget already set up. This is what it looks like.

Code to paste

All of it goes in the Embed element, exactly where you want the tickets to show. The script line can move to Site settings > Custom code > Head code instead, so it loads on every page.

<div class="hievents-widget"
data-hievents-id="123"
data-hievents-widget="wgt_a1B2c3D4e5F6g"
></div>
<script async src="https://app.hi.events/widget.js"></script>

123 and wgt_a1B2c3D4e5F6g are placeholders. Open your event, click Widget Embed under Integrations, save your widget and copy its code: it carries your real event and widget IDs. Colors, the checkout setting and the language are stored with the saved widget, so changes you save reach your page without pasting again. A Button widget keeps its text, colors and corner radius in the code, and Fit height to content is in the code for the other widgets, so copy it again after changing those. The full list of attributes is in the widget docs.

§ 04 · What to expect

What happens once it is live

Checkout opens over your page

When a buyer clicks continue, checkout opens in a pop-up on top of your Webflow page. They never leave your site. To send them to a new tab instead, set Checkout opens in to New tab in Widget Embed.

The element grows to fit

The widget auto-resizes as ticket types expand and collapse, so give the Embed element auto height rather than a fixed one. Prices and availability update on their own; the code never needs re-copying for that.

It matches your styles

Match your event page in one click, or set your own button, background, text and border colors, corner radius and padding, with no custom CSS. Save the widget and your changes reach every page that embeds it, with its views, orders and conversion counted in Hi.Events.

If you cannot run scripts on Webflow

On a site without a Site plan, add a Button element and link it to your Hi.Events event page. Buyers get the same checkout on app.hi.events, in your colors from the Homepage Designer. How the Homepage Designer works

§ 05 · The widget

What the widget sells on your Webflow page

Whatever you set up in Hi.Events shows in the widget. There is no cut-down embed version.

Paid, free, donation and tiered tickets
Add-ons, sold with a ticket or on their own
Promo codes, including hidden tickets they unlock
Registration questions per ticket type
Tax and fees inside the price or added at checkout
Ticket by email, with a link to the QR code
Checkout in the visitor's own language
Sale windows, capacity and per-order limits
Card, Apple Pay and Google Pay through your Stripe account
§ 06 · FAQ

Selling tickets on Webflow: questions

Do I need a Webflow app or integration to sell tickets?
No. The Hi.Events widget is a few lines of HTML in an Embed element. There is nothing to install from the Webflow Marketplace and nothing that touches Webflow Ecommerce. Tickets, orders, payments and check-in live in Hi.Events.
Why does the widget not show in the Webflow Designer?
The Designer canvas is not where to test it. Publish the site, or open the staging link, and check the widget and a test checkout there.
Which Webflow plans allow custom code?
Webflow says the Code Embed element is available with a Core, Growth, Agency or Freelancer Workspace, or on any site with an active Site plan. If your site is on the free Starter plan and cannot publish custom code, link a button to your event page instead.
Does it slow down my Webflow site?
The script line loads with the async attribute, so the browser fetches it alongside your page instead of waiting for it. The widget renders inside the Embed element once the page is ready.
Can I use the widget in a Webflow CMS Collection page?
Yes. Put the Embed element in the Collection page template. Every item shares one Hi.Events event ID in the div, so this suits one event listed in several places; for one event per collection item, paste a separate Embed element per event page.
Can I embed a buy button, my lineup or my schedule instead?
Yes. An event's Widget Embed has four types: Tickets, Button (a button that opens tickets in a pop-up), Lineup and Schedule. Each one goes into an Embed element the same way.
Does Webflow take a cut of ticket sales?
No. Payments go through your own Stripe account, connected to Hi.Events, not through Webflow Ecommerce. Free tickets are free. Paid tickets carry the Hi.Events platform fee of 1.25% plus a small fixed amount per ticket, which you can pass to the buyer, and Stripe's standard card rate.See pricing →
§ 07 · More

The same widget on other builders

Docs and guides

Put tickets on your Webflow site today

Create your event, open Widget Embed, paste the code. No credit card, no sales call.

Get started free

Free events cost nothing. Paid tickets are 1.25% + $0.60, with no monthly fee and no contract — see the full pricing.