Embed on your website

The builder is in your race's director dashboard on the website. You paste the code from a computer, so it isn't in the Run This app.

1. Open the builder

   In your director dashboard, open Marketing Embed on your website.

2. Pick what to embed

   A whole card, or just one piece (the button, the countdown, spots left or the price). The preview at the top is the real thing, running the same code your website will.

3. Choose what it shows and how it looks

   Turn parts on and off, pick colors, corners and the button's words.

4. Copy the code and paste it on your site

   Press Copy code, then paste it into a custom HTML or code block on your website, wherever you want it to appear.

A whole card:

• Card: a column for a sidebar or next to your text.
• Banner: a full-width strip for the top of a page.
• Compact: one line that fits in a header, a footer or between paragraphs.
• Distances: each distance with its price and its own Register button.
• Hero: your race's cover photo with the details on top.

Or just one piece, which comes with no box around it so it sits right on your page: the Register button, the countdown, spots left or the price. Each piece has one extra you can turn on, like the price on the button or the whole price schedule. Want a countdown in your header and a button further down? Copy one line for each piece and put them wherever you like.

For a whole card, choose which parts show: the race name and icon, the date and place, the countdown, prices, the next price increase, spots left, the Register button and "powered by Run This". Every part can be turned off, "powered by Run This" included.

Everything comes from your race page, so the embed never says more than the page does:

• Prices are the ones checkout charges, and the price increase shows only when one is coming.
• Spots left shows only when your race page shows capacity: the Show current capacity on the event page switch in Global capacity, under your distances in Edit event.
• The button follows your race page too. When the race sells out it offers the waiting list if you have one, before registration opens it says when it opens, and after registration closes it links to your race page instead.
• A postponed or cancelled race says so, the way your race page does.

Numbers refresh within about a minute. When you renew your race for next year, the same code shows the new year's details, so there is nothing to paste again.

The embed fits itself to the space you paste it into, not to the size of the screen. A banner in a wide spot is one row; in a narrower column it moves the details under the name; in a sidebar or on a phone it stacks. The Distances layout turns its columns into rows when space is tight.

Use Desktop, Tablet and Phone above the preview to see each width. The preview draws the embed at that real width and shrinks the picture to fit your window.

• Box around it: its own background and border, or no box so it sits on your page.
• Colors: Light, Dark, or Your site's, which uses your page's own text color for the words.
• Button and bar color: pick a swatch or type any hex code. The button's words switch between light and dark on their own so they stay easy to read.
• Corners (rounded, pill or square) and font (Run This's, or your site's own).
• The button: its words, and whether it opens the registration page with one distance already picked.
• The countdown counts down to race day, the next price increase, or registration closing. Before registration opens, it counts down to the opening.

Anywhere you can add HTML: Squarespace, Wix, WordPress, Webflow or a hand-built site. Look for a block called Code, Embed, Custom HTML or similar.

If your site builder removes scripts, choose iframe under Your code and paste that instead. It shows the same thing in a frame.

Selling through a Shopify store? Add the Run This registration button block to your Shopify theme instead. See Selling through Shopify.

Visits and registrations that start from the embed show as Your website in the Traffic sources card on Charts and insights, on the website and in the Run This app.

The embed sets no cookies on your site, asks nobody to sign in on your page and takes no payment there. A runner clicks Register and finishes on Run This, with Apple Pay and Google Pay working as usual. Keeping checkout on Run This is what lets the embed work in every browser.

Building something custom? Every option is a plain attribute, and the same data is available as JSON. See the race embed for developers.