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

Sell tickets on Framer
One Embed component.

Framer has no ticketing of its own, but its Embed component takes HTML. Paste the Hi.Events widget into one, publish, and sell tickets from your Framer site, with checkout in a pop-up or a new tab.

Create your event freeJump to the steps →

One Embed component, no plugin from the Framer Marketplace.

§ 01 · Before you start

What you need

Nothing to install on Framer. 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
  • Edit access to the Framer project
  • A Framer site you can publish, because scripts only run on the published site

What Framer needs from you

Framer's help articles on the Embed component and on custom code do not tie either to a plan, so this page does not claim one. They do say Framer runs scripts in the browser and not in the editor, so publish before you judge the result. Site-wide code lives in Project Settings > Custom Code; you do not need it, because the script can sit in the Embed component with the widget.

§ 02 · Steps

How to sell tickets on Framer

5 steps, with the exact menu path in Framer 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 Framer 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 component where tickets should appear

    In the Framer editor open the Insert menu, search for Embed, and drag the Embed component onto the page where tickets should show.

    Insert > Embed

  3. Paste the code into its HTML tab

    Select the component and paste the code into its HTML tab: the div and the script line under it, together. The canvas will not run the script, so the box stays empty in the editor.

  4. Give the component room

    Make the component as wide as the content column and tall enough for your ticket list. Check it on the desktop layout and on a phone, and add height if the list is cut off.

  5. Publish and run a test checkout

    Publish the site, open the live page and buy a ticket. If checkout shows inside the component rather than over your page, set Checkout opens in to New tab in Widget Embed and save. Refund the test order from the Hi.Events dashboard.

§ 03 · The code

The embed code, and where it goes on Framer

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 HTML tab of the Embed component, where you want the tickets to show. To load the script once for the whole site, add that line in Project Settings > Custom Code with Add Script, placed in the head, and keep only the div in each Embed component.

<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 in a pop-up or a new tab

By default checkout opens in a pop-up over the page the widget runs in. If on your site it opens inside the component instead, set Checkout opens in to New tab: buyers check out on app.hi.events in a full browser tab and get their tickets by email.

Give it the height it needs

The widget resizes its own content as ticket types expand and collapse. Size the Embed component so the whole list fits, and look again after you add ticket types. Prices and availability update on their own; the code never needs re-copying for that.

It matches your design

Match your event page in one click, or set your own button, background, text and border colors, corner radius and padding. 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 Framer

If you would rather not use an embed, add a Framer button or link that points 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 Framer 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 Framer: questions

Do I need a Framer plugin to sell tickets?
No. The Hi.Events widget is a few lines of HTML in an Embed component, which is built into Framer. There is nothing to install from the Framer Marketplace. Tickets, orders, payments and check-in live in Hi.Events, and payments go through your own Stripe account.
Why is the widget blank in the Framer editor?
Framer runs scripts in the browser, not in the editor, so the Embed component stays empty on the canvas. Publish the site and check the widget and a test checkout on the live page.
Which Framer plans allow the widget?
Framer's help articles on the Embed component and custom code do not name a plan, so this page does not either. If your site cannot run the code, link a button to your event page instead.
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 component the same way. Size the component for the content: a schedule needs more height than a button.
Does it slow down my Framer 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 component once the page is ready.
Does Framer take a cut of ticket sales?
No. Payments go through your own Stripe account, connected to Hi.Events. 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 Framer 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.