Install Booking Widget on Your Website

Modified on Fri, 13 Feb at 3:07 PM

The Good Journey Booking Widget Form is a versatile web application that seamlessly integrates with your website, enhancing user search and booking capabilities without compromising your site's aesthetics. It's lightweight, mobile-friendly, and customizable to match your brand's colors and theme.

Keep in mind that prior web development experience is recommended for installation.

Use Cases

There are several flexible ways to integrate and present your booking web app to your users, depending on your website design and user experience goals:

Open via Button or Link
Add a “Book Now” button or link on your website that opens the booking web app in a new tab or same window. This is the simplest and most common approach.
Embed Directly with an iframe
Embed the booking web app directly within your website using an iframe. This allows users to search and complete their booking without leaving your site, providing a seamless, fully integrated experience.
Use the Booking Widget with Redirect
Install the booking widget on your homepage or landing page. When users enter their trip details and click Search, they are redirected to the booking web app to view vehicle options and complete their reservation.
Embed Mode - Redirect to a Custom Page on Your Website (Advanced)
For a more advanced integration, configure the widget to redirect users to a dedicated page on your own website. This page can display the booking results or details using your own layout, branding, or embedded iframe—creating a fully branded and controlled booking journey.

Installing the Booking Widget

The widget form comes in two modes:

Full mode
Compact mode

Full Mode

Compact Mode

Getting Started — Locate Your Fleet Token

Open the Command Center and navigate to Settings.
Select Product Discovery.
Scroll down to the Booking Web App section.
Click Settings.
Copy your Booking Web App link.
Your Fleet Token is the unique code at the end of this link.

For example the fleet token in the screenshot above is kiv95ee8

1. Adding Head Script Tags

To integrate the widget, begin by adding the following code snippet within the <head> section of your HTML:

<script>
function initGJBookingForm() {
    window.GJBookingWidget.init({
        fleetToken: 'REPLACE_WITH_FLEET_TOKEN'
    });
}
</script>
<script defer="defer" src="https://widget.goodjourney.io/js/widget.js"></script>

Ensure that you replace REPLACE_WITH_FLEET_TOKEN with your own fleet token. This code initializes the booking form when your webpage loads.

2. Specify the Widget Placement

Next, decide where you want the widget to appear on your website. By default, it should be placed within a <div> with the ID gojo-widget-container. Example shown below:

<div id="gojo-widget-container">
  <!-- The widget will be embedded here -->
</div>

You can use a different ID if necessary, but keep in mind that this may require additional configuration. Please refer to the Configuration section for further details.

With these two simple steps, you'll have our widget form seamlessly integrated into your website.

Configuration

The widget requires some configuration to function properly. You can also customize certain settings to tailor the widget to your specific needs. Refer to the table below for details:

Important Notes

Whitelist your domain
After installing the widget, please contact support@goodjourney.io to whitelist your domain. This step is required to enable address search functionality within the widget.
Ensure a default font is defined
Make sure your website specifies a default font for the body or html tag in your CSS. If no font is defined, the widget may display without proper typography on mobile devices.

Sample Code to test

Here is some sample code for you to play with the configurations. You can add in your own fleetToken, configure and test the colors before integrating with your own website:

Name	Type	Required	Default	Description
fleetToken	String	Yes		The fleetToken is obtained from command center > settings > Product Discovery > PWA
mode	full or compact	No	full	The widget supports two view modes. full arranges components horizontally, while compact arranges them vertically.
root	String	No	gojo-widget-container	Use this key if you want to specify a different container ID instead of the default value.
partnerId	String	No		This key is used to collect commissions when the widget is embedded on a partner's website.
corporateId	String	No		This key is used to link the booking to the corporate. (This recommended over partnerId)
locale	String	No	en-US	A string with a BCP 47 language tag.
localizationData	JSON	No		JSON object with key-value pairs for supporting multiple languages.
color	JSON	no		Customize the default theme of the widget. Refer to the Customization section for more details.
rtl	Boolean	No	false	Support RLT mode
latitude	Number	No		The default latitude value applied when searching for an address.
longitude	Number	No		The default longitude value applied when searching for an address.
openInNewTab	Boolean	No	true	Controls whether open in the same tab or a new tab of the browser.
redirectUrl	String	No		`pwaLink` defines where users will be redirected after clicking the Search button in the widget. When a user enters trip details and clicks Search, the widget will redirect to this URL and automatically include all booking query parameters (such as pickup location, destination, date, time, passengers, etc.). If `pwaLink` is not specified, the widget will redirect to your default Booking Web App link configured in Command Center. Examples Redirect to your GoodJourney Booking Web App: https://business.goodjourney.io/ Redirect to a custom booking page on your own website: https://www.yourwebsite.com/booking This allows you to fully control the booking experience while preserving all search data from the widget.
renderPWAIframe	String	No		Renders the booking web app directly inside a specified iframe container on your website instead of redirecting users to a separate page or opening a new browser tab. This enables a fully embedded, seamless booking experience while maintaining your website’s layout, branding, and navigation. For instructions on how to do this view this guide.