Portal Construction 301

Where We Are In Portal Construction 101and 201 we created a Group Profile in the local system and uploaded to our Web Reservation site. We then opened the Group Profile on the Web system and added a client logo to the site and a customized welcome message. In this session we will truly modify the appearance of the portal by changing the colors of the site and restricting the locations displayed in the drop lists. Here is our Portal as it appears today: In Portal Construction 101and 201 we created a Group Profile in the local system and uploaded to our Web Reservation site. We then opened the Group Profile on the Web system and added a client logo to the site and a customized welcome message. In this session we will truly modify the appearance of the portal by changing the colors of the site and restricting the locations displayed in the drop lists. Here is our Portal as it appears today:

Step 1 – Login to Online System Login to your online web reservation utility page. (This is typically your Hudson web reservation site but with the URL ending in /resutil. Once logged in, you will be presented with the Main Utility Menu page. Login to your online web reservation utility page. (This is typically your Hudson web reservation site but with the URL ending in /resutil. Once logged in, you will be presented with the Main Utility Menu page.

Step 2 – Locate Site Colors & Fonts On the Custom Tab, select the “Site colors & fonts” option.

Step 3 – Default Colors & Fonts A window will open displaying the default text and background colors for your main Hudson Web Reservation screens.

Identify Text Colors By adjusting the values in the Text Color column, you can change or edit the way text labels contrast against the background colors on your default system screens. Our desire is to locate this same type of information, within the Group Configuration section and then change it so that the font colors and background colors match those of our group profile’s main marketing website.

Return to Group Profile / Colors Tab Click the link at the bottom of the screen to “Return to the Utility Menu”. Then select the Favorites Tab and Group Configuration option. Locate the Group Profile that you are establishing the portal for. Select the Colors Tab. You will see that all the fields are blank for your group profile’s portal. This is because all group portals use the default site color scheme we just saw unless it is changed or adjusted here.

Color Palette Assistance There are several different ways to determine what color codes are available to place in these boxes. We will cover 2 such methods in this tutorial. Color Selection Option 1 Use the built in Hudson Color Palette Tool. Simply click the link “here” on the colors page. There are several different ways to determine what color codes are available to place in these boxes. We will cover 2 such methods in this tutorial. Color Selection Option 1 Use the built in Hudson Color Palette Tool. Simply click the link “here” on the colors page.

Hex Codes You can then view a list of colors and their corresponding “Hex codes” Compare the colors you find here with the colors on your clients marketing web site and try to find the closest matches. This process is quick, but requires a good eye for color. The Hex Codes presented here are but a very small sampling of the hundreds that are possible. This process can get you “close” in many instances but won’t get you “exact” matches. Write down or make a note of the entire Hex Code, e.g. #FF6600 You can then view a list of colors and their corresponding “Hex codes” Compare the colors you find here with the colors on your clients marketing web site and try to find the closest matches. This process is quick, but requires a good eye for color. The Hex Codes presented here are but a very small sampling of the hundreds that are possible. This process can get you “close” in many instances but won’t get you “exact” matches. Write down or make a note of the entire Hex Code, e.g. #FF6600

Color Analyzer Tools Color Selection Option 2 Use an external color analyzing tool. Many such tools exist, some are websites, some are applications and some are browser plugins. ColorZilla is one such browser plugin that works with Firefox and Chrome web browsers. Once it is installed, you open the client website and launch the tool. This view shows the various ColorZilla tools available. For this example, we are using the Webpage Color Analyzer Color Selection Option 2 Use an external color analyzing tool. Many such tools exist, some are websites, some are applications and some are browser plugins. ColorZilla is one such browser plugin that works with Firefox and Chrome web browsers. Once it is installed, you open the client website and launch the tool. This view shows the various ColorZilla tools available. For this example, we are using the Webpage Color Analyzer

Web Palette Analysis The Webpage Analyzer in this case displays all the colors that are contained on clients webpage, including graphics, text, background colors, logos, etc. When selecting one of the colors from the bar, you are provided with the Hex Code immediately beneath. These codes can be written down or “copy / pasted” into your group profile colors fields on the web reservation system. Other tools work in a similar manner. This process gives you an exact color match.

For our sample portal for ACME Widget Company, we are analyzing the colors and shades found in the company logo. Once the Hex Codes have been obtained, we return to the group profile and insert them into the proper fields. For our sample portal for ACME Widget Company, we are analyzing the colors and shades found in the company logo. Once the Hex Codes have been obtained, we return to the group profile and insert them into the proper fields.

Setting the Portal Colors Note that in this case, some of our fields have been left blank. You can do this if you want the default site color values to remain unchanged. In this case, we have also changed the default site background color (white) to a golden orange, to help match the tone and primary color of our logo. Once you click the “Update” button at the bottom of the page, you can see, under the description column, how well your text and background colors will contrast. Some adjustment or fine tuning may be required. You can also adjust default font type, size and color for your portal.

Sample Color Settings Here are some images of settings for other portals… The “mouse over color” causes the buttons on the welcome screen to change color slightly or lighten / darken when the mouse cursor is placed on or over the button.

Check your Results You are now ready to reload and display your updated Group Portal welcome page! You have successfully changed the color scheme of the portal to match the clients marketing website or logo! You are now ready to reload and display your updated Group Portal welcome page! You have successfully changed the color scheme of the portal to match the clients marketing website or logo!

What’s Next? The second half of this session deals with how to limit or restrict the locations that are displayed within the portal. This is very useful when a portal will be used to book transportation to / from conferences or corporate locations where only very specific locations may be selected. The second half of this session deals with how to limit or restrict the locations that are displayed within the portal. This is very useful when a portal will be used to book transportation to / from conferences or corporate locations where only very specific locations may be selected.

Current Location Lists If I try to book a reservation on my portal now, I see several different location categories to select from. When I select the Hotels drop list, I see a list of hotels from all over eastern Massachusetts. My desire is to restrict this list to just a few Boston area hotels, and to hide the other location categories.

Locating Fare Keys This step requires you to lookup and determine the Hudson “Fare Key” associated with the valid locations you want to display. This can usually be done in 2 different ways: 1)Use the local system to look up the Fare Key 2)Open the fare file used to create your fares This step requires you to lookup and determine the Hudson “Fare Key” associated with the valid locations you want to display. This can usually be done in 2 different ways: 1)Use the local system to look up the Fare Key 2)Open the fare file used to create your fares 1) Open HWeb Agent and start a reservation. Locate the Hotel(s) you wish to include. Scroll to the right for each and you usually find the “Type” and the “Code.” Write down the “codes”. 2) Open a Hudson fare file (ex: bosfares.csv). Locate the Hotel(s) you wish to include. Look to the left for each and you will find the “Fare Key”. Write down the “Fare Keys”.

Group Profile Configuration With your Fare Keys in-hand for the hotels you wish to have displayed, return to your group profile configuration page on the web system, and then select the “Locations” tab.

Web Edited Locations / Fare Keys Type the Fare Keys into the Web edited locations field. The sequence that you type them in does not matter as all locations will be sorted alphabetically when displayed. NOTE: If your portal allows Hourly and Point to Point reservations as well, you can enter the same or different set of fare keys in the appropriate field on this page.

Modified Location Lists Return to and launch your portal again and start a reservation. You will note that only the Hotel category remains, as all of the locations you specified with Fare Keys were of the Type=Hotel. If you had entered Fare Keys corresponding to other location types, those categories would appear as well. Each category will contain ONLY those locations for which you entered a Fare Key.

Check your Results You are now ready to reload and display your updated Group Portal welcome page! You have successfully changed the color scheme of the portal to match the clients marketing website. You also restricted the pickup and dropoff locations to the most appropriate for this group. You are now ready to reload and display your updated Group Portal welcome page! You have successfully changed the color scheme of the portal to match the clients marketing website. You also restricted the pickup and dropoff locations to the most appropriate for this group.

More in the Series The next steps: Now that you have your portal built, and modified, you will want to further revise and customize to enhance its appearance, use and appeal. Check out the other presentations in this series for more information. Portal Configuration 401 Advanced options The next steps: Now that you have your portal built, and modified, you will want to further revise and customize to enhance its appearance, use and appeal. Check out the other presentations in this series for more information. Portal Configuration 401 Advanced options