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. Drop the Hi.Events widget into one, add one line to your site head, and checkout opens in a modal over your Webflow page.

Create your event freeJump to the steps →

An Embed element and one line in Site settings, on any site with a Site plan.

§ 01 · Before you start

What you need

Nothing to install on Webflow. The widget is two snippets 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 two snippets from Hi.Events

    Open your event in Hi.Events and click Widget Embed under Integrations. Pick your colors, then copy the Embed Script and the Embed Code. They already contain your event ID.

    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 Embed Code into the element

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

  4. Add the Embed Script to the site head

    Open Site settings, go to Custom code and paste the one-line script into the Head code field, then save. To load it on one page only, use that page's settings instead. If you would rather keep it all in one place, paste the script into the same Embed element above the div.

    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 full-screen modal over your Webflow page. Refund the test order from the Hi.Events dashboard.

§ 03 · The snippets

The two snippets, and where they go on Webflow

The Widget Embed page in Hi.Events generates both with your event ID and colors filled in. This is what they look like.

Snippet 1 · Embed Script

Goes in Site settings > Custom code > Head code, so it loads on every page. It can also sit in the same Embed element above the div.

<script async src="https://app.hi.events/widget.js"></script>
Snippet 2 · Embed Code

Goes in the Embed element, exactly where you want the tickets to show on the page.

<div class="hievents-widget"
data-hievents-id="123"
data-hievents-primary-color="#7b5db8"
data-hievents-background-color="#ffffff">
</div>

123 is a placeholder. Open your event, click Widget Embed under Integrations, and copy the generated snippets: they carry your real event ID and the colors you pick there. 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 full-screen modal on top of your Webflow page. They never leave your site. To send them to a new tab instead, add data-hievents-checkout="new-tab" to the div.

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 embed code never needs re-copying for that.

Colors come from the snippet

Button, background and text colors are the data attributes in the div, so the widget matches your Webflow styles without custom CSS. Change them in the element, or copy a fresh snippet from Widget Embed.

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 two snippets of HTML: one in an Embed element and one in your site head. 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 Embed Script 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.
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 two snippets. 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.