Branding Inntopia eComm

To implement a custom header, custom footer and overall custom look and feel for the Inntopia platform’s content area of your eComm sales channels, Inntopia can apply requested modifications to its standard branding.

If you have a responsive website, you may be tempted to add its entire header and footer to the custom branding. While you are welcome to do this, Inntopia recommends against doing so keeping in mind that eComm is an online store/ booking engine, and it is best practice to minimize distractions (links, etc.) that may lead the site visitor away from the store, just as they were about to make a purchase with you.

  • Inntopia will host your branding files for you on a secure CDN.
  • Inntopia uses one custom branding template for all pages within your booking engine.
  • Custom branding for eComm is made up of four parts:
    • Custom header HTML
    • Custom footer HTML
    • Custom CSS code/file
    • Custom JavaScript code/file (optional)

  • The custom branding code you provide to Inntopia is placed within Inntopia’s branding template. The CSS is placed or linked within the <head> tag, the JavaScript /jQuery file is placed or linked at the bottom of the <body> tag, and the header and footer code is placed as follows:

<header>

<div class="header">

[your header HTML here]

</div>

</header>

<div class="container-body">

[Inntopia's code here]

</div>

<footer>

<div class="footer">

[your footer HTML here]

</div>

</footer>

Note: Avoid including additional <header> or <footer> tags, as well as elements with the header or footer classes, as there could be CSS conflicts that cause unintended display issues.

The procedures for submitting a branding request are as follows:

  1. Use the Branding Requirements outlined below to create your branding files.
  2. Organize your branding files into the following directories:
    • css
    • imgs
    • js
    • index.html

      Note: Your index.html file should only include the header and footer sections of your site. The center section (where reservations are booked) is reserved for Inntopia's code.

    • Email Banner Image .jpeg or .gif

      All references to images, fonts, etc., must be relative.

  3. Submit your branding files package to your Strategic Account Manager or CustomerCare@inntopia.com along with the following information:
    • Sales Channel ID of each sales channel for which you want custom branding applied.
    • If possible, screen shots and/or mock ups of features to be changed (buttons, headers, etc.)
  4. Upon review and scoping of the project, the files are handed off to Inntopia's Digital Services team for implementation.
  5. Once your custom branding is implemented, visit all pages with your custom branding to be sure everything is displayed as expected.

When submitting your branding request to Inntopia, follow the below requirements and recommendations:

In an effort to provide the maximum amount of security to consumers, Inntopia has adopted Always On SSL (AOSSL) for eComm . All references loaded on an eComm page must either use the HTTPS protocol or not specify the protocol at all.

Correct HTTPS example: "https://www.inntopia.travel/css/file.css"

NOT: "http://www.inntopia.com/css/file.css" )

Inntopia uses Bootstrap CSS and custom style sheets to stylize elements on the page. When you supply your CSS file to Inntopia, only include styles that are included in the header and footer, as well as font styles (family, color, etc.) and link colors/decoration. Do not include global styles or styles for elements and classes that are not included in the header or footer. Doing so will cause conflicts with Inntopia's custom Bootstrap CSS and may result in certain sections of your branding displaying incorrectly.

The following styles are some of the Inntopia styles that you can customize:

  • body – font-family, color
  • a,.btn-link – color
  • a:hover, .btn-link:hover – color
  • .btn-info, .btn-primary – color, background-color, border-color
  • .btn-info:hover, .btn-primary:hover – color, background-color, border-color

Inntopia uses z-index in the style sheet. If your code uses z-index, it must be 999 or less (Inntopia's z-index values start at 1050). If your z-index is higher than 999, some elements may not display correctly.

If you use Bootstrap or have IDs and classes that match those that Inntopia uses, there will be a conflict and certain elements of the website may not display properly. To prevent this from happening, use CSS specificity to limit your styles to the header and footer.

  • Non-specific
    • div { height: 30px; }
  • Specific
    • .custom-header div { height: 30px; }

If you are using custom fonts that are being served up by a third party (Typekit, Google Fonts, etc.), you must include the necessary source code. Some third-party vendors require you to specify the domains in which you want to use your fonts as part of their cross-origin header settings.

If a specific domain is required, be sure to add the following depending on the environment in which you are working:

  • Stage – stage.inntopia.travel
  • Production/Live – inntopia.travel
  • Custom domain or subdomain you are using for your Inntopia eComm booking engine (i.e. shop.mysite.com)

Inntopia's responsive template includes Bootstrap, JavaScript, jQuery, and other libraries. Inntopia recommends you do not include any of these complete libraries in your branding, as it may conflict with what Inntopia is using. If your design requires a script, Inntopia is available to test for any conflicts.

Inntopia's branding supports the use of favicons and touch icons. A favicon appears in the user's browser. A touch icon appears on a mobile device if the user saves your branding to their home screen.

A favicon is 16 pixels x 16 pixels and is saved as a .ico file (i.e. favicon.ico).

Touch icons should be saved as .png files with the following dimensions and file names:

  • 144 pixels x 144 pixels – apple-touch-icon-144-precomposed.png
  • 114 pixels x 114 pixels – apple-touch-icon-114-precomposed.png
  • 72 pixels x 72 pixels – apple-touch-icon-72-precomposed.png
  • 57 pixels x 57 pixels – apple-touch-icon-57-precomposed.png

Inntopia's eComm branding is designed to be used on desktop PCs and mobile devices. Since not all mobile devices support Flash, Inntopia recommends not using it in your branding.

Inntopia can support Live Chat in your custom branding. Not all devices will support Live Chat, and the functionality (and display) may be different on mobile devices. If you include Live Chat in your branding, Inntopia will test and make recommendations if the user experience is poor.

To have Live Chat incorporated into your custom branding, include the following within your branding files:

  • Live Chat Script
  • Live Chat HTML

Upon completion of an online transaction, guests receive an email notification. This notification can contain an email banner that should match the design of your branding.

  • The recommended banner size is 800 pixels wide x 120 pixels tall.
  • Save the banner as a .jpg, as some email providers do not display other file formats properly.
  • Name the file email_banner.jpg and include it in the imgs directory of your branding package.

To reassure your guests that their credit card information is secure on each page of the sales process, Inntopia can add a secure certificate logo to your website.

  • Specify where on the page you want the logo to appear.
  • All URLs must be secure (HTTPS).
  • Save the logo image as "secure_logo.gif".

Testing of all branding is recommended for the following browsers:

  • Internet Explorer 11, Edge, Firefox, Chrome and Safari on desktop
  • Safari and Chrome on iPhone
  • Chrome and Samsung on Android

Verify that your branding works on multiple devices prior to sending it to Inntopia. Once your branding has been implemented, visit all pages on your sales channels to ensure everything displays and functions as expected.

Note: Older browsers, especially Internet Explorer 8 and older, do not support HTML5. Carefully review your branding if you use HTML5 elements (nav, section, article, etc.).

Fees for Inntopia branding services differ for existing partners vs new partners and may vary depending on the complexity of the request. For more information on branding fees, contact your Strategic Account Manager.