Online system Version 3.1

· March 25, 2016 ·

Online Changes

Ensure that any rate allowed online is active and also has Allow Online checked. Otherwise the guest will not be allowed to book the item.

The pages themselves have a completely different look and are responsive. At least one new page needs to be setup on your system. See below for details.

Online Setup

Currently there are 5 functions, and 3 new ‘widgets’ (and counting), that guests can carry out online:

Before you get started there are some things you need to have beforehand:
For Reservations, Payments, and Gift Certificates, you will need:

  • An SSL Security certificate for your website (new for V3)
  • A Slim CD processing account
  • A Slim CD API User name – slimcd.com, Config, API Access Credentials, check LOAD, click ‘Submit Query’, then enter the User Name into your credit card tab (company setup) (new for V3)
  • Specific pages setup on your website (one new one for V3)

There is some commonality in all the cases where a web page needs to be setup. When you see a line like:

    <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=book31"></script>

xxx refers to your Roam ID. If you login with abc.opalstacked.com then your Roam ID is abc.
The <script> line above must go at the end of the <body> section of your page, after all other html code.
No longer do any pages need the getapi?app=base22 line. (new for V3)

Reservations

For reservations you will need five specific pages setup:

  • Product pages – these are your web pages augmented with some Roam code
  • Booking page – where the guest selects dates, enters people, etc. (new for V3)
  • Checkout page – where the process occurs. Guest info, payment info, etc
  • Success page – thanking the guest for their reservation, google analytics, etc
  • Failure page – something went drastically wrong as Roam will usually handle all problems

Product pages

These are your current pages augmented to include Roam. Roam augments your pages by turning specially constructed buttons into links to book an item.
And, when the guest has an item in their cart, a small area will appear at the bottom of the page allowing the guest to view their cart, change their info, or checkout.

    <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=book31"></script>

To make your button (or any other element) clickable it must have a class of R3Book. Also, your button needs to have certain data attributes. These attributes are, depending on item type:

  • data-cat – item category – A,L,R,M,O,S,T,P
  • data-code – item code, as per your item setups
  • data-rate – item rate
  • data-opt – package, or rental2, option#
  • data-unit – a specific lodging unit
  • data-date – specific item date (optional)
  • data-cocode – specific company code (optional)

An example button:
<button class=’R3Book’ data-cat=’A’ data-code=’D1′ data-rate=’1′>
Book Now
</button>

New in Version 3 is that the R3Book elements are not treated as buttons opening a popup but as links to a page. The example button above will get turned into a link:

<a href='yourbookingpage?cat=A&code=D1&rate=1'><button><a>

Rather than setting up a clickable element, such as a button, and having Roam turn it into a link, you can just create the link instead, following the pattern above. But do not add the class=’R3Book’ or else Roam will try to create a link around your link.

Booking Page

This is the page where the guest makes their choices about the item they are booking. This is new to Version 3. In past versions this was a popup rather than a separate page. This change was done for a number of reasons:

  • A popup actually lives in your page and it’s difficult for your page and Roam to live on the same page;
  • A separate page is easier to make responsive;
  • And a separate page can have it’s own URL address so you can link directly to the Roam page from, say, an email.

An example of the URL for the above button would be:
bookingpage.html?cat=A&code=D1&rate=1

If your booking page was named bookingpage.html.

The name of your booking page needs to entered into the Booking entry under the Reservations section in your company setup. The http portion is not required.

Your booking page needs to have the following line:

    <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=booking31"></script>

Also, the page needs to have a div with an id of R3Booking:

    <div id='R3Booking'></div>

Note the difference between book3 for the item pages and booking3 for the booking page.

It would be best if this page was very minimal. A responsive logo, perhaps some css to set the base font and colors.

Checkout Page

This is where the guest would login, pay for, and confirm their reservation. If they do not have an account with you then they can create a new one.

The url of this page is entered into the Checkout entry under the Reservations section in your company setup. The http portion is not required.

Your booking page needs to have the following line:

    <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=checkout31"></script>

Also, the page needs to have a div with an id of R3Checkout:

    <div id='R3Checkout'></div>

Note the https on the script tag. Your checkout page must be secure, ie https. To use a temporary checkout page for testing, enter it into the spot marked Test to the right of the Checkout page, the Company Setup.

Success Page

This page is used to thank the guest for making their reservation, and optionally provide them with more information and record the sale in Google analytics.

The url of this page is entered into the Success entry under the Reservations section in your company setup. The http portion is not required.

Your success page needs to have the following line:

    <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=summary31"></script>

You can have Roam display certain information in your page:
For the reservation#, provide an element with an id of ‘R3rsvno’
For the total sale, provide an element with an id of ‘R3total’

If the reservation was placed onto the waitlist, Roam will attempt to show an element with an id of ‘R3waitlist’. An example would be

    <div style='display:none' id='R3waitlist'>
    Text about the waitlist
    </div>

FailurePage

Not much is needed on this page as it’s simply to inform the guest that there was a massive failure in the reservation process.

The url of this page is entered into the Failure entry under the Reservations section in your company setup. The http portion is not required.

Payments

This is where the guest or any group member can make a payment. Your page needs the following line:

    <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=payment31"></script>

Note the difference from the older version, which used app=pac_members22

The page needs to have a div with an id of R3Payment:

    <div id='R3Payment'></div>

This URL goes into the Home Page entry under the Payments section of the company setup.
Not the https on the script tag. Your payment page must be secure.

Success and Failure pages are also required, and the URLs are also entered into the Payments section. Roam has no interaction with these pages therefore no Roam code is added.

Gift Certificates

If you wish to sell Gift Certificates online then you must setup a stand-alone page with the following:

    <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=giftcert31"></script>

The page needs to have a div with an id of R3Giftcert:

    <div id='R3Giftcert' data-cocode='x' ></div>

This URL and the URLs for the success and failure page must be entered into the company setup under Gift Certificates.

Note the https on the script tag, your Gift Certificate page must be secure.

Liability Waivers

The Online waiver pages are all done for you. All you need is a webpage to host them in. The code below is the minimum needed. The code also allows for you to provide the URL with the reservation and group leader numbers so that the guest does not need to enter them.
If your waiver URL was mysite.com/waivers then your URL would be:

https://mysite.com/waivers?rsvno=xyz&glcustno=abc

The code to include on your page for the waivers is:

    <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=waiver31"></script>

The page needs to have a div with an id of R3Waiver:

    <div id='R3Waiver' ></div>

Note the use of https, above. Your liability pages should be secure.

Information Request Forms

Information Request forms are used to gather the names and addresses of prospects, and optionally follow up with them.
This form can work in many ways and thus has quite a bit of configuration.

At the bottom of the <body> section, add:

    <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=signup22"></script>

Note that this is still version 2.2

The request forms require an html <form> element with an id of ‘R3Signup’.

As this form is interactive the email address is the first field requested in order to possibly locate that individual in your Database.
If the email address is on file, then the user must: enter the password to their account, request it be emailed to them, or re-enter their email address.
Configuration occurs 2 ways: hidden fields and specially named inputs.

Hidden Fields

  <input type='hidden' name='custno' value=''/>  <!-- Leave empty -->
  <input type='hidden' name='source' value='signup' />  <!-- Leave as signup -->
  <input type='hidden' name='cocode' value='1' />  <!-- Company # in Roam -->
  <input type='hidden' name='letter' value='signup.html' />  <!-- Letter name in /signup on server -->
  <input type='hidden' name='subject' value='Welcome!' />  <!-- Email subject -->
  <input type='hidden' name='notecat' value='customer' />  <!-- Name of note category to use for comments -->
  <input type='hidden' name='egrpWA' value='t' />  <!-- Specific email group, if any, otherwise use emlgroup below -->
  <input type='hidden' name='bcc' value='faxgreg@yahoo.com' />  <!-- BCC -->
  <input type='hidden' name='page2' value='pac_booking.html' />  <!-- response page -->

  • custno – leave blank
  • source – must be signup
  • cocode – must be set -user supplied
  • letter – must be set -user supplied
  • subject – must be set -user supplied
  • notecat – must be set -user supplied, where to store any notes
  • egrp – optional -user supplied, can also be done via an input
  • bcc – optional -user supplied
  • page2 – must be set -user supplied

Specially Named Inputs

All inputs should follow this pattern:

  <input type='text' name='emailadd' size='30' maxlength='50' class='mandatory' data-verbose='Email Address' tabIndex='1' />

Specifically, each field needs a name, an optional class of ‘mandatory’ if the field is mandatory, and data-verbose set to the description of the field, used if the field is mandatory.

List of possible input field names:

  • frstname – First Name
  • lastname – Last Name
  • grpname – Group Name
  • addline1 – Address-1
  • addline2 – Address-2
  • city – City
  • emailadd – Email Address
  • zipcode – Zip/Postal Code
  • phoneday – Day Time Telephone#
  • phonenit – Night Time Telephone#
  • phonecel – Cellphone#
  • phoneoth – Other tel#
  • birthdt – Date of Birth

List of possible select field names:

  • region – List of Country States (populated by Roam)
  • ctrycode – List of Countries (populated by Roam)
  • gender – List of Genders (populated by user, M, F, U-unspecified)

List of possible textarea field names:

  • comments – will be saved in the notecat category (from hidden fields, above)

List of possible checkbox field names:

  • bulkemal – Send mass emails (do not supply a value)
  • bulkmail – Send mass mails (do not supply a value)

Form buttons:

  • btnSave – Submit the form
  • btnClear – Clear the form

Choices populated by Roam:
Other than the country/regions, there are 5 more fields that can be populated by Roam. They are:

  • Group Type field, used by groups to indicate what type of group they are
  • Inquiry code to indicate how a person heard about you
  • Preference code to indicate what a person’s interests are
  • Email Groups to indicate what email newsletters a person would like to receive
  • Info Codes to indicate what information a person would like to receive

These are all optional.

To have Roam create these fields you must include certain elements in the form.

  • Group Type: add a <select>(single) with a name of grpcode
  • Inquiry: add a <select>(single) with a name of inqcode
  • Preferences: add a div with a name of prefcode
  • Email Groups: add a div with a name of emlgroup
  • Info Codes: add a div with a name of infocode

The Preferences , Email Groups, and Info Codes will be populated with check boxes. Use the div styling to contain the display size and scrolling.

Rather than using Roam-generated Group Type and Inquiry values you can set them manually. Create form fields with the names
‘grpcode’ and ‘inqcode’, but do not use a <select>, as Roam assumes that you wish the field auto-populated. A user may only choose one of these fields.

Preferences, Email Groups, and Info Codes can be any type of form field (other than a <select>) and name the fields ‘pref’ + the preference code,
‘egrp’ + the email group code, and ‘info’+ the information code. If an <input type=’text’> field, then value must be a ‘t’. A user should be able to choose any number of these fields.

For a full fledged, stripped down, working form (which you may copy and enhance), see:
http://roam3.adventurebooking.com/pac_signup.html

Guest Dashboard

The dashboard allows a guest to view all of their reservations and quotes. If either one is selected then all of the booked items are shown. If a reservation is selected then the payments and completed waivers are listed. Quotes can be converted to active reservations – space permitting. Also, the guest can make a new payment, email a payment request to another guest, complete a waiver, or email a waiver request to another guest. Also, the guest can purchase a Gift Certificate, as well as update their contact information.

<div id=’R3Console’ ></div>

  <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=console31"></script>

In-page calendar

You can now insert an availability calendar of an item right into your webpages. You will need to include the same script as used on your booking pages (app=book3). To have a calendar inserted simply provide a div tag with the class R3Calendar where you would like the calendar to appear.
<div class=’R3Calendar’ data-cat= data-code= data-rate= ></div>
The cat, code, etc are the same as you would supply on an R3Book element (above). The month displayed will be either the month the item is first available, the current month, or the month containing the guest’s arrival date – if they’ve entered that information. If they have, and that information gets changed, the calendar(s) will update.
There is a choice of 3 layout patterns: calendar, which is just simply a calendar with colored dates indicating availability; list, which is a list of the dates with space, one date per line; or string, which is a long line of dates with space, comma separated. All dates are clickable to book. To specify which layout option to use use the attribute data-layout=”, with either calendar, list, or string. Only use list or string when there is a limited list of dates with availability, as dates within the next 2 years are listed.

Comparisons

These are used to list specific items for a certain time frame. The items can be clicked to view a description and there is a Book Now button to book the item. This can be used to list Activities, Lodgings, or Packages. Activities and Lodgings will also display prices. Packages can’t display pricing as the price is dependent upon the items chosen within the package.
These require a div with an id of ‘R3Activity’, ‘R3Lodging’, or ‘R3Pkg’ and an attribute of data-codes=’list of codes’ to display. The codes for Activities and Lodging or just a comma separated list of codes. Packages need to be in the form Package code/Package option#. Multiple codes/opts are separated with commas.
In the item setup you select which rates to use for the price display by checking the ‘Comparison’ check box.
<div id=’R3Activity’ data-codes=”></div>
<div id=’R3Lodging’ data-codes=”></div>
<div id=’R3Pkg’ data-codes=”></div>

  <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=activity31"></script>
  <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=lodging31"></script>
  <script type="text/javascript" src="https://xxx.opalstacked.com/online/getapi?app=package31"></script>

Google Analytics using Gtags

To use Google Gtags to track your online users, add the following code to the head portion of your pages. The code needs to be on any page with a Book Now button, the Booking Page, the Checkout Page, and the Success page.

     <script type="text/javascript">
      
      <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
      <script type="text/javascript">
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'GA_MEASUREMENT_ID');
      </script>

The events tracked are:

  • view_item – when an item calendar page is displayed
  • add_to_cart – when an item is booked (added to cart)
  • remove_from_cart – when an item is removed from the cart
  • view_cart – when the cart is displayed
  • select_promotion – a valid discount code is entered
  • sign_up – a new profile is created
  • join_group – any preferences selected when creating/changing a profile
  • begin_checkout – when the checkout page is displayed
  • login – any time a guest logs into their account
  • purchase – when success page is delivered, or quote converted to active
    line
    footer
    Copyright © 2024 SoftwareMill. Website: Wingspan Creative Communications.