Help your customers find the best activities on Oʻahu.

Try it

This is the live widget. Change the options and copy the code for your page.

<div id="oahu-activities"></div>
<script src="https://huavela.com/assets/embed.js"></script>
<script>
  Huavela.mount("#oahu-activities", {
    partner: "your-partner-id",
    height: 480,
    traveler: {
      name: "John",
      adults: 2,
      children: 1
    },
    theme: {
      accent: "#216d91",
      background: "#f7fafb",
      text: "#14394f",
      radius: 18
    }
  });
</script>

Quick start

1. Add a container where the activity finder should appear. It fills the container’s width.
2. Load the script and call Huavela.mount with what you know about your customer.

<div id="oahu-activities"></div>
<script src="https://huavela.com/assets/embed.js"></script>
<script>
  Huavela.mount("#oahu-activities", {
    partner: "your-partner-id",
    height: 560,
    traveler: { name: "John", adults: 2, children: 1 },
    trip: { start: "2026-10-23", end: "2026-10-27" },
    theme: { accent: "#216d91", background: "#f7fafb", text: "#14394f", radius: 18 },
  });
</script>

That is the whole integration. Every option is optional: with none, the activity finder opens with a general greeting in our default colors.

Without writing JavaScript

If your page is built from a template, put the same options on the container as attributes. The script finds every element marked data-huavela.

<div data-huavela
     data-partner="your-partner-id"
     data-height="560"
     data-name="John" data-adults="2" data-children="1"
     data-trip-start="2026-10-23" data-trip-end="2026-10-27"
     data-theme-accent="#216d91"
     data-theme-background="#f7fafb"></div>
<script async src="https://huavela.com/assets/embed.js"></script>

Options

As attributes, the same options are data-partner, data-height, data-name, data-adults, data-children, data-trip-start, data-trip-end, data-placeholder, data-overlay and data-auto-scroll.

Tell the activity finder about your customer

After a checkout you already know who is traveling and when. Pass it in, and the conversation starts where a good host would:

Hey John, I’m your Oʻahu activity finder. I see you’ll be on the island from October 23 to 27, traveling as a party of 3. Would you like me to find some amazing experiences for your stay?

Your customer can answer “yes” and the activity finder carries on from there. Leave out anything you do not know; the greeting uses only what you pass.

• The greeting is shown at once, with no waiting.
• Your customer’s details go into the widget’s address after the #, the part of an address a browser does not send to a server. They reach Huavela only when your customer sends a first message.
• The widget accepts a name, trip dates and party size, and nothing else. Do not send email addresses, phone numbers or booking references; they are ignored.
• A value that is not in the expected form is ignored and named in the browser console, and the rest still apply.

Match your brand

Pass a theme to match the page around it. The defaults use Huavela’s ocean blues, soft surfaces, rounded cards and DM Sans typeface. Colors take any CSS color. As attributes they are data-theme-accent, data-theme-background-image and so on.

The space around the experience cards is transparent, so the cards sit on your page’s own background.

Events

Follow what your customers do with the widget in your own analytics. Events carry counts and experience identifiers, never the text of the conversation.

var widget = Huavela.mount("#oahu-activities", {
  partner: "your-partner-id",
  onEvent: function (name, detail) {
    // name: "ready" | "message" | "results" | "experience_open"
    //     | "experience_close" | "booking_click"
    analytics.track("oahu_activities_" + name, detail);
  },
});

// The same events also reach the container as DOM events.
document.querySelector("#oahu-activities")
  .addEventListener("huavela:booking_click", function (event) {
    console.log(event.detail.slug);
  });

// In a single-page app, remove the widget when its view goes away.
widget.destroy();

A useful next step for every trip

Help customers turn their Oʻahu plans into days they will remember. The live preview above shows how the activity finder fits into your page.

Questions

Will it affect my page’s styles or speed?

No. The script is a few kilobytes and has no dependencies. The widget runs in its own frame, so neither side’s styles or scripts reach the other.

My site has a Content Security Policy.

Allow https://huavela.com in both script-src and frame-src.

Does it set cookies?

No. A conversation lives only while the page is open.

Where does booking happen?

Each experience shows its details, dates and prices in the panel over your page. The booking itself is completed with the experience’s booking partner, in a new tab. Huavela may earn a commission on affiliate bookings at no additional cost to your customer.

Can I put it anywhere other than a confirmation page?

Yes. Trip dashboards, pre-arrival pages and destination guides all work. One page can hold more than one widget.

Join the program

Email aloha@huavela.com with your site’s address. We will send your partner ID and help you get set up.