Customer Booking Portal Advanced Customization Options


This article describes advanced customization options not available via Portal profiles.


Audience: CEO, Owner, Manager, Developer
Read Time: 5 Minutes

 

This document is part of a Customer Portal Document Series:


TABLE OF CONTENTS


Overview

There are several options to add additional integration into the Customer Portal. In general, these options do NOT leverage Portal profiles but instead enable various mechanics in the portal itself. Each of these will be described below.


Available Options


Embedded Widget (and url parameter options_

The Customer Portal can be embedded as a widget or iframe in an existing site. This allows the user to stay on your company website but still interact with the underlying white-label Customer Portal.


<iframe src="./?sysId={SYSTEM_ID}&companyId={COMPANY_ID} title="Customer Portal"
    height="600"
    width="100%"
    style="text-align: center; ">
</iframe>


You can adjust the size of the widget using standard iframe sizing properties. Additionally, there are a variety of parameters that you can pass into the URL to help tailor the display of the underlying portal.


doHideHeaderFooter

Set = "true" to hide header and footer from the size and only show main page content.


doHideChat

Set = "true" to disable the chat CSS code if entered in default settings


doBiggerDisplay

Set = "true" to use a control sizing option better suited for mobile displays



Custom Chat/CSS Code Integration

You can add additional script that will be added to the head section of the main Portal Page. This additional script can be used to add third-party chat widgets, custom CSS styling and other various mechanisms. The chat code is limited to 2000 characters and is set in the General Portal setting area.



Embedded Login Form

if necessary, you can add a login form to your website and pass the username/password through to the login page. This is an older integration that was persisted in the latest portal so as to not break existing integrations.


Example

<form name="loginForm" method="get" action="./">
    <table width="600px" style="border: 1px solid #ccc; padding: 5px; background-color: darkblue">
        <tr>
            <td colspan="2" style="text-align: center; padding-bottom: 10px">
                <b>Embedded Login Passthrough</b>
            </td>
        </tr>
        <tr>
            <td width="50%" align="right">
                User Name / E-mail:
            </td>
            <td width="50%">
                <input id="user" name="user" type="text" />
            </td>
        </tr>
        <tr>
            <td width="50%" align="right">
                Password:
            </td>
            <td width="50%">
                <input id="password" name="password" type="password" />
            </td>
        </tr>
        <tr>
            <td width="50%" align="right">
                Login Type:
            </td>
            <td width="50%">
                <select id="type" name="type">
                    <option value="customer">Customer</option>
                    <option value="corporate">Corporate Account Manager</option>
                </select>
            </td>
        </tr>
        <tr>
            <td width="50%" align="right">
                <input id="sys" name="sys" type="hidden" value="{SYSTEM_ID}" />
            </td>
            <td width="50%" align="right">
                <input id="companyId" name="companyId" type="hidden" value="{COMPANY_ID}" />
            </td>
            <td width="50%">
                <input id="Submit1" type="submit" value="submit" />
            </td>
        </tr>
    </table>
</form>
Note: You must update/add hidden fields to the request to ensure the login page has the correct context; including System ID and  Company ID.


New User Passthrough

This is a popular setting which allows a URL parameter to bypass the login page and link directly to the booking form. This parameter was also desceribed in the URL parameter section.


Add the URL Parmeter "new=true" to bypass the login page and redirect immediately to booking page for new customers


Note: You must update/add hidden fields to the request to ensure the login page has the correct context; including System ID and Company ID.

URL Parameter Options 


companyId

Set to the Company ID from FASTTRAK Company profile for target branding


new

Set to true to bypass the login page and redirect immediately to booking page for new customers


pp

Set to Portal Profile ID as shown in Portal profile settings to target a specific Portal Profile Workflow.


quoteId

Set to reservation of Quote to automatically load the selected quote after login/redirect.


targetportal

Set to the Target Portal type key to redirect the user to that portal. The legacy My Trip Center portal with an express-like UI (one-page booking page). 1 = legacy My Trip Center portal, 2 = 2015 Portal, 3 = 2023 Portal)


user|passwword|type

Set each independently to pre-populate the login page with User, password and User Type options. If the user and password is populated in the URL, the login page will attempt to auto-login the user. (type options: customer, corporate)


doShowThemeOptions

Set to true so expose a dropdown of theme options to test theme scenarios.


Theme Demo Option

You can add a URL parameter to expose a Theme Selection dropdown so you can test out different themes.


Add the URL Parmeter "doShowThemeOptions=true" to enable the theme selection drop-down.


Google Analytics

The Customer Portal currently supports UA codes that can be embedded into the main page of the Customer Portal. You can update this value in System Settings.


Additional Google Analytics support of ga4 codes is coming soon.