Embedding GoGood on your site

Put the interactive map guide or the event submission form on your own pages — iframe snippets, sizing, the resize handshake, theme parameters, and what to check when a frame comes up blank.

Two things can be embedded in your own pages:

	What it is	Needs a key?
Guide embed	The interactive map guide — the same one on gogoodtravel.com, scoped to your destination	No
Event submission form	A form your visitors use to submit events to the guide	No

Both are plain <iframe>s. Nothing to install, no script library, no build step. If you want to render event data as native pages on your own site instead of in a frame, that is the read API — see Events API integration.

Staff generate ready-to-paste snippets from the admin Embeds page; a business owner can get the guide snippet themselves under Embed the Guide in their account. This page documents what those snippets do and what you can change.

1. Guide embed

<!-- GoGood Travel Guide Embed -->
<iframe
  src="https://gogoodtravel.com/golden/app"
  width="100%"
  height="700"
  frameborder="0"
  style="border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
  allow="geolocation"
  title="GoGood Travel Guide - Golden"
></iframe>

Replace the src with your own guide URL and the title with your destination's name.

Your guide URL

The path depends on how your guide is set up, so copy the URL from the generator rather than assembling it by hand:

Guide type	URL shape	Example
Single destination	`/<tenant>/app`	`https://gogoodtravel.com/golden/app`
Has sub-destinations	`/<tenant>/places`	`https://gogoodtravel.com/colorado/places`
One sub-destination	`/<tenant>/places/<destination>`	`https://gogoodtravel.com/colorado/places/boulder`
All of GoGood	`/places`	`https://gogoodtravel.com/places`

Always use the https://gogoodtravel.com origin. Embeds point at production even when a snippet is generated from a preview environment.

Size

width="100%" fills whatever container you drop it into. For a fixed width, set both the attribute and the inline style, and keep max-width: 100% so it still fits on a phone:

  width="800"
  style="border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 100%; margin: 0 auto; display: block;"

Height is fixed at whatever you set. The guide does not report its height to your page, so 700 is a starting point — raise it if the guide feels cramped. Somewhere between 600 and 900 suits most layouts. (The submission form does auto-resize; see below.)

`allow="geolocation"`

Keep this. It lets a visitor use "near me" inside the guide.

Geolocation only reaches the frame if your page is allowed to use it too. If your site sets a Permissions-Policy header, it must permit geolocation for the gogoodtravel.com origin, or the button silently does nothing.

Appearance

The guide embed takes no theme or colour parameters. It renders with your destination's own branding, which is configured on our side — if the colours or logo are wrong, that's a settings change we make for you, not a URL parameter.

2. Event submission form

Lets visitors submit an event to the guide from your own site. Submissions land in a review queue; nothing publishes automatically.

<!-- GoGood Travel — submit an event -->
<iframe
  id="gogood-submit-event"
  src="https://gogoodtravel.com/embed/<tenant>/submit-event"
  width="100%"
  height="900"
  frameborder="0"
  style="border: 0; width: 100%;"
  title="Submit an event"
></iframe>
<script>
  // The form's height changes as the user fills it in; resize to match so
  // there's no scrollbar inside the frame.
  window.addEventListener('message', function (e) {
    var d = e.data
    if (!d || d.type !== 'gogood:embed:height') return
    if (typeof d.height !== 'number' || !isFinite(d.height)) return
    var f = document.getElementById('gogood-submit-event')
    if (f) f.style.height = d.height + 'px'
  })
</script>

Replace <tenant> with your tenant slug — the same segment that appears in your guide URL.

The resize script is not optional

The form grows and shrinks as it is filled in: date fields expand for recurring events, validation messages appear, the venue picker opens. Without the listener you get a fixed 900px box with a scrollbar inside the iframe, which is the single most common way this embed is set up wrong. There is no error message — it just looks bad.

The embed posts one message to the parent window on every size change:

{ type: 'gogood:embed:height', height: 1240 }

height is an integer in CSS pixels. Nothing else is ever sent, and the embed does not listen for messages from your page.

Keep both checks in the listener. Your page can receive postMessage from any frame it hosts, including ad frames and third-party widgets — the type check and the finite-number check are what stop an unrelated frame from resizing ours. If you adapt the snippet, keep them.

Theme parameters

Two query parameters, both optional:

Parameter	Values	Default	Effect
`accent`	Six hex digits, `#` optional	brand green	Buttons, focus rings, links
`theme`	`dark`	light	Dark surfaces and text

https://gogoodtravel.com/embed/<tenant>/submit-event?accent=1a7f5a&theme=dark

Two things that catch people out:

Six digits exactly. accent=f00 is silently ignored — write accent=ff0000.
Encode the # as %23 if you include it. A literal # in a URL starts the fragment, so ?accent=#1a7f5a sends nothing at all. Easiest to just leave it off.

theme only recognises dark. Any other value, including light, renders the light theme.

Times are entered in Mountain Time

Submission times are currently interpreted as America/Denver, regardless of where your destination is. If you are outside Mountain Time, tell submitters to enter the local Mountain time, or expect to correct times during review. We're aware of this and it will change; the form does not currently say so on screen.

What happens to a submission

The submitter confirms their email address.
The event enters a review queue — a human approves it before it appears anywhere.
Approved events show up in the guide and in the read API.

The form is protected by a honeypot field and per-email and per-IP rate limiting, and venue details are re-validated server-side. You do not need to add a CAPTCHA.

Why an iframe and not a script widget

A script widget would run our JavaScript in your page's origin — access to your cookies, your DOM, and your visitors' input. An iframe cannot do any of that. It also means a change on our side can never break your page's layout beyond the box you gave it.

The form is noindex, so embedding it will not create duplicate content against your own pages.

3. Troubleshooting

Nothing renders / the frame is blank. Check the URL loads directly in a browser tab. A mistyped tenant slug 404s rather than falling back, which is deliberate — otherwise a typo would put the global form on your page and route your visitors' submissions to the wrong destination.

Scrollbar inside the submission form. The resize script is missing or the id on the iframe doesn't match the one the script looks up. Both must be gogood-submit-event, or change both together.

"Near me" does nothing in the guide. Your page's Permissions-Policy isn't allowing geolocation through to the frame. Also note browsers only grant it on HTTPS.

The frame is cut off on mobile. A fixed pixel width without max-width: 100%. Add it to the inline style.

Our account pages won't embed. Deliberate. Account, admin and sign-up pages send frame-ancestors 'self' and cannot be framed by another site. Only the guide and the submission form are embeddable.

4. Getting help

Email info@gogoodtravel.com with the page you're embedding on and the snippet you used. If the guide renders standalone but not in your page, include any console errors — a Content Security Policy on your side is the usual cause.