Guide

Save to Mobile Itinerary

One button that hands a booking to Voyani. The traveler taps it after booking and gets their trip in the Voyani app.

Two styles

Button: one pill that sits beside Print or Save as PDF. Pick black, white, orange or your own color.
Panel: a short line of copy, the orange "Open my trip" button and the app on a phone, for pages with more room.

Wording

The button's first line is one of: "See my trip", "View my trip", "Save to Mobile Itinerary". The second line always reads "via Voyani app".

The link

Every placement points at https://go.voyani.com/save with three parameters.

Parameter	Value	Meaning
partner	{PARTNER_ID}	Your partner ID from Voyani.
booking	{BOOKING_REF}	Your booking reference for this traveler.
placement	confirmation \| email \| reminder	Where the traveler tapped, so you can compare spots.

Web page code

One link with inline styles and an inline icon. It inherits your page's font. Override the colors with the CSS variables --voyani-save-bg and --voyani-save-fg.

Web page

<a href="https://go.voyani.com/save?partner={PARTNER_ID}&amp;booking={BOOKING_REF}&amp;placement=confirmation" class="voyani-save" style="display:inline-flex;align-items:center;gap:12px;padding:10px 22px 10px 16px;border-radius:999px;background:var(--voyani-save-bg,#2b2c2c);color:var(--voyani-save-fg,#ffffff);font-family:inherit;line-height:1.2;text-decoration:none;text-align:left">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0"><path d="M14 7V4.5A2.5 2.5 0 0 0 11.5 2h-5A2.5 2.5 0 0 0 4 4.5v15A2.5 2.5 0 0 0 6.5 22h5a2.5 2.5 0 0 0 2.5-2.5V17"/><path d="M9 19h0.01"/><path d="M9.5 12H21"/><path d="M17.5 8.5L21 12l-3.5 3.5"/></svg>
  <span>
    <span style="display:block;font-size:15px;font-weight:600">Save to Mobile Itinerary</span>
    <span style="display:block;font-size:12px;color:#c9cbcb">via Voyani app</span>
  </span>
</a>

Email code

Tables, inline styles and PNG icons, because mail clients drop SVG and CSS variables. The pill's color sits on the table cell so Outlook still draws it.

<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:separate">
  <tr>
    <td bgcolor="#2b2c2c" style="border-radius:999px;background:#2b2c2c">
      <a href="https://go.voyani.com/save?partner={PARTNER_ID}&amp;booking={BOOKING_REF}&amp;placement=email" style="display:block;padding:10px 22px 10px 16px;border-radius:999px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;color:#ffffff;text-decoration:none">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
          <td valign="middle" style="padding-right:12px"><img src="https://prototype.voyani.com/email/save-itinerary-phone-arrow-white.png" width="24" height="24" alt="" style="display:block;border:0"></td>
          <td valign="middle" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;color:#ffffff;line-height:1.25">
            <span style="font-size:15px;font-weight:600">Save to Mobile Itinerary</span><br>
            <span style="font-size:12px;color:#c9cbcb">via Voyani app</span>
          </td>
        </tr></table>
      </a>
    </td>
  </tr>
</table>