Begin by confirming you have the proper permissions to utilize the Guest Website features. If you do not currently have access, contact your User Admin to get the following permissions added to your account:
Guest Website
Guest Website - Change Theme
Guest Website - General HTML
Where should I make the edits?
Some merchants have access to a lower environment like Train and Staging which allows you to edit the guest website with minimal interruption to guests. You can also take the guest website package from production and update in a lower environment to ensure that you are working on the correct version of the site.
If you do not have a lower environment, consider working on the guest website during off-peak hours.
What are the technical considerations?
The general HTML code is the base branding for all the sub-pages on the guest website. The HTML is different based on which theme is selected. Sub-pages, that is any page that is not the landing page, inherits everything in the head tag of that landing page, which includes JS and CSS. This cannot be prevented.
We do not have access to the sub-page HTML (account login, check balance, registration, etc.). To target the internal pages, you will need to use write targeted CSS, JS, or jQuery on the general HTML page to make edits.
We cannot add or remove pages from the system. Do not design for pages that do not currently exist. We cannot reuse pages for purposes other than their original intent.
It is recommended that you do not remove the PXS navigation bar. It has a logged in and logged out state and removing this bar could prevent your users from logging out or navigating through the logged in pages.
We use the Bootstrap 3 Library. We cannot edit it or turn it off. Choose your class and ID names accordingly.
All HTML tags must be closed, including self-closing tags. Usually link, meta, image and line break tags are overlooked. EG. <br> should be <br/>
Anything inside of the “content” class with not be inherited into the sub-pages.
What are the editing components?
Themes
The guest website has 3 themes that you can chose from. Themes do not inherit the colors and CSS from other themes. The code of each theme is slightly different so you may have to adjust class names accordingly.
The Preview Panel
The preview window does not show merchant specific information pulled from the database, like eGift card art or guest specific information, so you will want to test your changes in a live browser window by clicking the “Guest Website URL” link. Make sure you open the link in a private or incognito window with no other private windows or tabs open, as our system caches HTML and CSS.
Download Package
By downloading a package, you are downloading the current state of the guest website. This is useful if you need to revert any edits.
Be sure to check the HTML and CSS for to make sure links and assets are pointed to the right server. Commonly missed items are reverse enrollment links and custom fonts. If you are unsure how to change or spot these, please contact [email protected] to have the package moved.
Images
The guest website does not have a client facing way of hosting images. You can host the images externally then link to them on the guest website. If you have access to email builder, then you can use the file manager to host web assets. If you do not have access to a web server or email builder, please contact [email protected] for assistance.
CSS
There are 3 ways to add CSS to the guest website. Either use the CSS box in the UI, edit the CSS directly in the HTML block or link to an external stylesheet. You may need to add !important; to override system defaults.
Custom Fonts
If you are using a font that can be found on Google Fonts or Adobe fonts, you can import or link them in the CSS then override the default fonts.
For fonts bought from font foundries or custom fonts, if these fonts are hosted on a server, then you can link or import them into the CSS. If there any issues you can email [email protected]. We may need to host these fonts locally.
What are the considerations for non-loyalty guest website use?
The guest website defaults to loyalty as the main page. If you are a client that only uses the guest website for selling eGift cards, physical cards, or checking balances then you would still need to brand the homepage in order to target these specific pages.
Preview Pages
In order to preview these pages you will need to click on “Guest Website URL“ in the Guest Website tool UI. In the URL replace /en-us/guest/with the subpages in the table below to get to the direct link to the page you are trying to edit. e.g. https://[merchant_name].myguestaccount.com/en-us/guest/egift?page=cardInfo
Subpages Table
Page | URL |
eGift | /en-us/guest/egift?page=cardInfo |
Physical Cards | /en-us/guest/card-sales |
Account nologin (check balance) | /en-us/guest/nologin/account-balance |
Logos
Logos are accepted in JPG, PNG, or GIF format and must be smaller than 1 MB.
Banner Themes and Specifications
Theme | Specs |
Top Level Navigation Theme | Banner (jumbotron) Mobile Version of the Banner |
Banner Theme | Max width 720 px. Max height 150 px Banner |
Left Navigation Theme | Banner (jumbotron) |
Banner (jumbotron) |