Home → Arctic Reservations → Guest-Facing Site → Embedding your full guest-facing site in an IFRAME
30.5. Embedding your full guest-facing site in an IFRAME
An IFRAME is a special tag on a website that allows embedding content from one website into another website. This can be used to embed the Arctic booking interface into a page on your site, avoiding the complexity of skinning the design in Arctic and providing seamless access to your marketing information and the booking interface without requiring the guest to click a "book now" button.
You can either embed your full guest-facing website in an IFRAME, or embed a single landing page in an IFRAME (see the next page in the documentation).
Create the page on your site
The first step to embedding your full guest-facing site in an IFRAME is to create a page on your website that will be devoted to all guest-facing functionality (bookings, registration, payments, etc). For example, create a page called "Reservations" or "My Bookings."
Tip: If your website has a sidebar for navigation or additional information, consider disabling the sidebar on this page. The guest-facing site benefits from maximizing the horizontal real estate. If you use WordPress, many WordPress designs have an option for a full-width page.
On the newly created page, add the appropiate JavaScript snippet. This JavaScript will do much of the heavy lifting, connecting to Arctic Reservations, adding an IFRAME and loading the needed content. The snippet is specific to your installation. The basic syntax is shown below:
<div id="arctic-iframe-container"></div>
<script src="https://reservations.mycompany.com/iframe/install.js"></script>
<script type="text/javascript">arcticIframeInstallInElement('arctic-iframe-container');</script>
On the first line, the "reservations.mycompany.com" should be replaced with your guest-facing subdomain. To find the exact snippet for your guest-facing site:
-
-
- Go to the "Settings" page, open the "Guest-Facing Site" section and click "Manage Guest-Facing Sites."
- Click "Settings" next to your guest-facing site.
- On the "Settings" page, look for the "IFRAME" section. This page will include the exact code that you need to add to your site.
-
Configure Arctic Reservations to use the page
Having created the above page, you need to configure Arctic by specifying the URL of the newly created page. Once you tell Arctic the location of the page, all guest-facing links will use the above page for links (including landing pages, booking links and guest-access links). To configure the location of the page, complete the following steps:
-
-
- Go to the "Settings" page, open the "Guest-Facing Site" section and click "Manage Guest-Facing Sites."
- Click "Settings" next to your guest-facing site.
- On the "Settings" page, look for the "Iframe Design" box. In the box, input the URL to the page you created before.
-
IMPORTANT: If you are switching from a subdomain guest-facing site deployment to an iFrame guest-facing site deployment, please be sure to contact support BEFORE entering the IFRAME URL. There are steps that support must take to be able to transition your guest-facing site deployment to use the IFRAME solely.
4. Save the settings.
Once you complete the setup above, Arctic will direct guests to your new page and will automatically load the appropriate part of the guest-facing site within the IFRAME. The guest will be able to access most of Arctic functionality via the embedded page.
The content on the IFRAME uses a generic light on dark style, but it may not match the rest of your site. You can customize this style to better match the rest of your website from the same settings page, specifying a font family, font size, text color and more.
Note:
- In order to best use this functionality, your website must have an SSL certificate and comply with PCI compliance standards.