Adding Capitan to Your Website

The Climber App is where your customers sign waivers, buy memberships and passes, and book events. It works as a page of its own, and it can also be displayed inside a page on your own website, so customers stay on your site while they buy.

Two things decide whether that works: which websites your organization allows to display the Climber App, and whether the customer's browser lets an embedded page store anything. This article covers both.

Choose what to display

Every Climber App page has its own web address, so you can embed the whole app or point directly at the part you want:

The simplest way to get the right address is to open your Climber App, navigate to the page you want customers to land on, and copy the address out of the browser's address bar.

Example use case: a location adds a "Book a class" page to its marketing site. Instead of embedding the Climber App home page and asking visitors to find the schedule, it embeds the schedule address directly, so the page opens on the list of upcoming classes.

Add it to your page

The Climber App is displayed with a standard HTML iframe , the same element used for an embedded video or map. Whoever maintains your website adds it to the page where you want the app to appear:

<iframe src="https://climber.hellocapitan.com/your-organization/"
 title="Book online"
 width="100%"
 height="900"
 style="border: 0;"></iframe>

Replace the address with your own. Two settings are worth getting right:

• Height. The Climber App cannot resize the box your website gives it, so set a height tall enough for the longest page a customer will reach. A box that is too short leaves customers scrolling inside a scrolling page.
• Width. A percentage width lets the app lay itself out for the space it has, including on phones.

Allow pop-ups and same-origin access if your website's page restricts them. Some site builders add a sandbox  attribute to embedded frames. The Climber App needs to store a session to keep somebody signed in, so a sandbox without allow-same-origin  stops it working, and one without allow-popups  swallows the "open in a new tab" links Capitan offers when something goes wrong.

Allow your website to display the Climber App

Your organization controls which websites may display its Climber App. The setting lives on the Staff Site, in Organization Settings under Climber App Settings:

1. Find Only allow specific websites to display the Climber App.
2. Turn it on.
3. In Websites Allowed to Display the Climber App, enter one website address per line.
4. Click Save.

Enter the address exactly as it appears in the browser's address bar, with no https:// , no path, and no port. For example, example.com . Each address also covers its subdomains, so example.com  allows www.example.com  and members.example.com  without listing them separately.

Organizations that already existed have this turned off, which means any website can display their Climber App, exactly as before. Turning it on is the point at which the list starts being enforced, so add your own website to the list before you turn it on. Organizations created after this release start with the restriction on and an empty list.

An empty list means no other website can display the Climber App. The restriction is on, and nothing is allowed through. Your Climber App keeps working normally for customers who visit it directly; only embedding is affected.

Example use case: a location embeds its booking flow on example.com  and its intro-class page on a separate campaign site at promo-example.com . Both addresses go on the list, one per line. Everything else, including a copy of the page on somebody else's site, is refused.

What a visitor sees when a website isn't on the list

When the browser tells Capitan enough about where the request came from, the frame shows a short explanation instead of the app: that the location allows its member portal on specific websites only and this one isn't on the list, a button to open the member portal in a new tab, the address spelled out for copying, and a line telling staff which setting to change.

When the browser doesn't say where the request came from, there is no explanation to show and the frame is blank. A blank frame where you expected the app is the symptom to look for, and the first thing to check is whether the website's address is on the list, spelled the way it appears in the address bar.

When a browser blocks an embedded page

A page displayed inside another website is subject to the browser's rules about third-party storage, and those rules differ by browser. Capitan uses partitioned cookies, which give the embedded app its own private storage for each website that displays it. That covers Chrome, Edge, Firefox, and Safari where Safari grants it.

Some browsers refuse that storage outright. When that happens, Capitan shows a warning at the top of the embedded app telling the customer their browser is blocking the page from remembering anything while it is shown inside another website, that they will not be able to stay signed in, and that their privacy choice will not be saved. The warning offers to open the Climber App in a new tab, and spells out the address for copying, because a sandboxed frame can swallow the click.

The link goes to your Climber App home page, not the page they were on. Several Climber App addresses carry a single-use credential (a password reset, an invitation, a tokenized payment link), and putting the current address into the page would publish that credential to every script on the page. The customer loses their place and lands on the home page instead.

Test your embed in Safari as well as Chrome. This is the failure a desktop Chrome test does not reproduce, and it is invisible until a customer tries to sign in.

Privacy notices in an embedded app

If your organization has Google Analytics, the Meta Pixel, or a script in the Tracking/Analytics Script field configured, the Climber App shows visitors a privacy notice, and it does so inside the embed as well. Visitors in the EU, the wider EEA, and the UK get a consent banner; visitors in the United States get a do-not-sell-or-share notice.

The notice sits at the bottom of the embedded frame, so leave room for it when you set the frame's height. It disappears as soon as the visitor answers.

Checklist before you go live

1. The embedded page loads your Climber App, not a blank frame.
2. Your website's address is on the allowed list, spelled as it appears in the address bar.
3. A customer can sign in inside the embed and stay signed in while they move between pages.
4. A purchase can be completed end to end without the frame going blank at the payment step.
5. The frame is tall enough for the longest page in the flow, including the privacy notice at the bottom.
6. The same checks pass in Safari and on a phone, not only in desktop Chrome.