There are a few options for adding TRYTN to your website, depending on your preferred booking experience. Each of these methods will be covered in the following article.
This article covers the following topics:
- Standard Booking Experience via Generic or Deep Links
- Embedded Booking Experience
- Booking via Widgets
Related Articles:
Standard Booking Experience via Generic or Deep Links
When your Booking experience lives on a separate URL, there are two primary ways to link directly to the booking engine from your website: generic (driving to product grid) and deep (driving to a specific product) link. More details on each linking method are provided below.
Generic Link
A generic link sends the user to the full listing of your shop's products (aka. your product grid), allowing them more flexibility when selecting a product, as they are not taken to a specific product by default. This strategy is most common for generic 'book now' buttons and not intended for pages that include details about a specific product you are selling on your website.
In the example below, the webpage shown includes two generic 'Book Now' links that will take users to the full grid of product offerings.
GENERIC LINK EXAMPLE:
If a customer clicks on a generic link, they will see your shop's product grid (see example below).
PRODUCT GRID EXAMPLE:
Example HTML for Generic Links
To provide an example, let's assume that your shop is called "Awesome Test Shop" with a Shop URL of "AwesomeTestShop." In the HTML code below, we can see that the TRYTN URL points directly to the main shop URL for this generic link.
<a href="https://trytn.com/AwesomeShopUrl">Book Now</a>
Deep Link
The ability to deep-link into the booking engine is a great way to drive customers directly to a product without them having to find it themselves. This strategy is very useful when the user is on the product details page of your site and they are ready to buy.
In the example below, the webpage shown includes a 'Book Now' link specific to the Discover Scuba Diving course.
If a customer clicks on a deep link, they will see a specific product landing page similar to the one below.
Example HTML for Deep Links
In the code example below, we still have a shop called "Awesome Test Shop" with a Shop URL of "AwesomeTestShop." However, we see that there are some additional items on this URL. In the above example, we are sending traffic directly to the product details page for a specific product. (Note: Use the scroll bar to see the full URL.)
<a href="https://trytn.com/AwesomeShopUrl/details/a1s2-e1t5d1-fd1s5fd-6t2f1-sd45d1">Book Now</a>
Adding Generic or Deep Links on TRYTN
To generate booking links for standard booking, individual products, or category links from your TRYTN account, navigate to Settings > Linking.
Booking Links
From the Linking page, click on +Booking Links to expand the section (see below). The following steps will walk you through the process of generating your link code.
1. Under Link Settings, enter the Link Text. This is the text you want to want to appear on your link.
2. Select the product or activity you want to link to, using the Products menu. Note that you may select 'Generic Book Now Link' to link to the full product grid.
3. Choose the language for your link from the Select Language dropdown menu.
4. Under Other Configurations, determine if you would like the link to open in a separate window and indicate if your site uses an embedded experience. (Note: See Option 2: Embedded Booking Experience for more details.)
Once all of the above information has been included, you can copy the generated Link Code and paste it on your website where you wish to include the booking link. When clicked, users will be linked to your desired booking path to buy your products.
Note: You can customize the look and feel of your booking link by applying your own styles and classes to the generated code.
Finding the Link to Your Product Details
There are a few ways you can find your product details link from your TRYTN account:
Via Products
1. Under 'Products' in the main site navigation menu, choose the product you wish to link to either under Scheduled, Unscheduled, or Merchandise.
2. Once you find the product, locate the Actions menu for this product and click on Products Preview Page.
3. From here, copy the page URL.
Via Product Details
1. In the main site navigation, click on Products Preview Page.
2. From here, you can find the product you're looking for from a full list of your product offerings.
3. Click on the product and copy the URL for that product page.
Via Shop URL
1. Navigate to your generic shop URL.
2. Find the product you wish to deep-link to
3. Copy the URL in the address bar.
Sending Users to a Specific Date (For Scheduled Activities)
When linking to a scheduled activity that occurs on a certain date, simply add startDate=YYYY-MM-DD to the query string. Note that this is an advanced feature and not recommended for most deep linking cases. The date you add has to be in the YYYY-MM-DD format. As an example, if you wanted to deep link a product to September 20th, 2021, you would insert 2020-09-20 as the date.
Embedded Booking Experience
Using the embedded booking experience, when a customer clicks on a link, the product list or specific product landing from TRYTN is displayed via a page overlay that floats over the webpage they clicked from. In other words, the external link (https://trytn.com/shopurl). Please note that embedded booking is required to use booking widgets (for more info on booking widgets, see Option 3: Booking via Widgets).
The example below illustrates how embedded booking works:
1. Let's say a customer clicks on the 'Book Now' button from the following shop's website...
2. The TRYTN product grid for this shop would then be displayed via overlay, keeping them on the same website as shown below.
Embedded Booking Implementation Instructions
To add embedded booking for your link, navigate to the Linking page on TRYTN.com via Settings > Linking. Complete the following information under Link Settings:
1. Under Link Settings, enter the Link Text. This is the text you want to want to appear on your link.
2. Select the product or activity you want to link to, using the Products menu. Note that you may select 'Generic Book Now Link' to link to the full product grid.
3. Choose the language for your link from the Select Language dropdown menu.
Next, you will see a radio button under Other Configurations that says My site uses the embedded experience. Click to select this setting and it will expand to open Advanced Settings (highlighted below).
Designing Your 'Book Now' Link
Now you get to determine the appearance of your 'Book Now' link. Use the dropdown menus to choose the Reservation Display Color (i.e., the color of the link button), the Position where you would like the link to appear on the page, and the link Size. You can also add an Icon to your link, if preferred. Below that, you will see a preview of your link that updates to reflect any changes you make.
Example:
Code for Embedded Experience
Below the link preview are 2 code options. For the embedded experience, you will use the second option, Required Code for Embedded Experience, outlined in a yellow box. (Note: The individual link is derived based on your selection from the Products dropdown on this page.)
Add the provided script/required code line to your website (preferable at the bottom, before closing body tag).
Booking via Widgets
Booking widgets are links that can be added directly to your shop's website or social media page to drop your customers straight into your TRYTN booking experience. To utilize widgets to add TRYTN to your website(s), follow the instructions below. Please note that you are required to use the embedded booking experience in order to utilize these widgets.
To get started, navigate to the Widgets page via Settings > Widgets. From here, click to choose one of the 3 widget types.
Calendar Widget (for scheduled products only)
To integrate a calendar onto your website, click +Calendar Widget to expand this section. Then follow the steps below:
- Select a product from the Products dropdown menu.
- Select the preferred language for your calendar from the Language dropdown menu.
- Click the blue Preview button to display a view of your calendar.
- Copy the generated code for use on your site. To continue, see the instructions for embedding under Option 2: Embedded Booking Experience.
Example:
Product Card Widget (applies to a single product)
To integrate a single product onto your website, click +Product Card Widget to expand this section. Then follow the steps below:
- Select a product from the Products dropdown menu.
- Select the preferred language for your product card from the Language dropdown menu.
- Click the blue Preview button to display a view of your product card.
- Copy the generated code for use on your site. To continue, see the instructions for embedding under Option 2: Embedded Booking Experience.
Example:
Product Grid Widget (applies to all products)
To integrate all products onto your website, click +Product Grid Widget to expand this section. Then follow the steps below:
- Select the product type from the Type of Product dropdown menu.
- Select the preferred language for your product grid from the Language dropdown menu.
- Choose a Category from the Categories dropdown menu.
- Click the blue Preview button to display a view of your product grid.
- Copy the generated code for use on your site. To continue, see the instructions for embedding under Option 2: Embedded Booking Experience.
Example: