Add Quest tours to a coded website (Next.js SDK, React, Vue, Angular)

A coded website (Next.js, React, Vue, Angular or plain HTML) can show your Quest packages in two ways. On Next.js, use the Quest Tours SDK: tours render on your own server, which is best for search engines. On other frameworks, use the same embed snippets as WordPress plus the tour detail web component. Both need Quest Pro (the free trial includes it) and your website added under Websites that can show Quest in Website embeds.

Next.js: the Quest Tours SDK

The SDK is the npm package @questpackages/tours. It needs Next.js 15 or later with the App Router, and React 19. It gives you styled tour list and tour detail pages, page titles and structured data for search engines, and an enquiry form that sends leads to Quest. Open Packages → Website embeds → Next.js SDK and follow its steps:

1. 1

   Site token

   Copy QUEST_SITE_TOKEN. It is a public token that tells Quest which company's tours to show. It cannot change anything.

2. 2

   Install the package and connect the site

   Your developer runs the install command and the setup command Quest shows, in the website project. Setup adds the environment variables and creates default tour pages and an update route when they are missing. It never overwrites existing files. If your site already has tour pages from a CMS, your developer points them at the SDK instead.

3. 3

   Hosting environment variables

   Copy the variables into your host (for example Vercel) for Production, then redeploy.

4. 4

   Instant updates

   Set the Revalidate URL (usually https://www.example.com/api/quest/revalidate) and keep the webhook secret on your host. Quest then refreshes your tour pages as soon as a package changes. Without it, pages refresh within about 5 minutes.

5. 5

   Verify on the live site

   After the deploy, your developer runs npx @questpackages/tours doctor in the website project. Then click Open tours list: it should show the same number of tours as Quest's check on that page.

React, Vue, Angular and other sites: snippets

• Copy placement snippets from Embed placements and the Theme Bridge script, as described in Show your tour packages on your website. On Next.js these are under Advanced: HTML snippets (no SDK).
• Do not insert the copied block with innerHTML alone: scripts inside it will not run. Put the div with its data attributes in your page markup and load the embed-loader.js script with a normal script tag or your framework's script helper.
• For a tour detail page on your own URL, use the web component quest-package-detail with the origin attribute (your Quest address) and the token attribute (the tour's slug, which tour cards pass in the ?quest= part of the link).
• React 19: pass origin and token as attributes on the element. Vue 3: bind them in the template. Angular: add CUSTOM_ELEMENTS_SCHEMA and bind attr.token.
• If your site has a Content Security Policy, allow your Quest address in script-src, frame-src, connect-src and style-src.

Not available

• An SDK for frameworks other than Next.js. Other frameworks use the snippets and the web component.
• Private API keys or an API that changes packages. The tours API only reads published tours.