Your TRYTN account offers an easy way to embed booking links onto shop websites hosted by Squarespace.
This article covers the following topics:
Related Articles:
- Adding TRYTN to Your Website
- Affiliate Linking to TRYTN
- Third-Party Linking to TRYTN
- Reseller Links with Tracking Source Code
- Create QR Code for a TRYTN Product Listing
Add TRYTN Embedding Code to Squarespace
Step 1: Retrieve Embedding Code from TRYTN
To generate embedding code to add to your Squarespace website, start by logging in to your TRYTN account and navigating to Settings > Linking.
From the Linking page, complete the fields displayed under Booking Links > Link Settings using the instructions provided below:
Link Text
In the Link Text field, enter the text you want to want to appear on your link (Ex: Book Now).
Products
Use the Products dropdown menu to select the product or activity you want to link to. To link to your shop's full product grid, select the Generic Book Now Link option, as shown in the example above.
Select Language
Choose the language used for your link from the Select Language dropdown menu.
Other Configurations
Under Other Configurations, you will see a radio button that says My site uses the embedded experience. Click to select this setting and it will expand to open Advanced Settings (highlighted in yellow below).
Advanced Settings
In this section you get to determine the appearance of your embedded 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 select an Icon to display on your link, or choose "None" if no icon is desired.
Preview
Under Preview, you will see a sample of your link that updates to reflect any changes you make to the Link Text, Reservation Display Color, and/or Size.
Example:
Link Code
Below the link preview are 2 code options. For the embedded experience, you will use the second option, labeled Required Code for Embedded Experience. (Note: The individual link is derived based on your selection from the Products dropdown on this page.)
Use your mouse to copy the code and then move to Step 2 to add it to Squarespace.
Step 2: Add Code to Squarespace
From your Squarespace site, start by clicking on Settings in the main navigation.
Scroll to the bottom of the Settings menu and select Advanced.
Next, select Code Injection from the Advanced Settings menu options.
On the Code Injection screen, determine where your link should be placed and enter the embedded code you copied from your TRYTN account
Example:
Then click Save at the top of the screen. After saving your code changes, anytime the link is clicked from your Squarespace website, users will be linked to your desired booking path to view/purchase 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.
Add Floating "Book Now" Button
You can add a floating ”Book Now” button to the bottom right portion of your Squarespace website by adding the floating link code beneath the embedded TRYTN script on the Squarespace location provided above in Add TRYTN Embedding Code to Squarespace.
STEP 1: Add TRYTN Embedding Code to Squarespace (this must be completed first)
STEP 2: Retrieve the floating link code from TRYTN by navigating to Settings > Linking.
From the Linking page, complete the fields under Booking Links > Link Settings according to the instructions provided below:
Link Text
In the Link Text field, enter the text you want to want to appear on your link (Ex: Book Now).
Products
Use the Products dropdown menu to select the product or activity you want to link to. To link to your shop's full product grid, select the Generic Book Now Link option.
Select Language
Choose the language for your link from the Select Language dropdown menu.
Other Configurations
Under Other Configurations, select the radio button under Other Configurations that says My site uses the embedded experience.
Example:
Next, under Advanced Settings, use the dropdown menu to choose the Reservation Display Color (i.e., the color of the link button). Then select "Bottom Right" as the Position where you would like the link to appear on the page. Finally, determine the link Size you wish to include on the page. You can also select an Icon to your link, or choose "None" if no icon is desired.
Under Preview, you will see a sample of your link that updates to reflect any changes you make.
Example:
Use your mouse to select and copy the text found in the Link Code field (example shown below).
Step 3: Add Link Code to Squarespace
Go back to your Squarespace website where you already included the embedded code from TRYTN. Directly underneath the Embedded Code you pasted before, you will need to paste the new Link Code.
Example:
Then click Save at the top of the screen. After saving your code changes, anytime the link is clicked from your Squarespace website, users will be linked to your desired booking path to view/purchase 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.
Add Direct Links to Products
You can easily customize links that lead directly to a particular product and add this to a Squarespace webpage. Using this method, links will automatically be embedded. Simply follow the instructions below to get started:
STEP 1: Retrieve Direct Link Code in TRYTN
From your TRYTN account, navigate to Settings > Linking.
From the Linking page, complete the fields under Booking Links > Link Settings according to the instructions (and example) provided below:
Link Text
In the Link Text field, enter the text you want to want to appear on your link (Ex: Book Your Tour).
Products
Use the Products dropdown menu to select the product or activity you want to link to. In the example above, we chose to link to "Scheduled - Standard Segway Tour."
Select Language
Choose the language for your link from the Select Language dropdown menu.
Other Configurations
Under Other Configurations, select the option that says "Open in a new window?".
Next, use your mouse to select and copy the text found in the Link Code field (example shown below).
Step 2: Add Link Code to Squarespace
From your Squarespace site, start by clicking on Settings in the main navigation.
Scroll to the bottom of the Settings menu and select Advanced.
Next, select Code Injection from the Advanced Settings menu options.
On the Code Injection screen, determine where your link should be placed and enter the Link Code you copied from your TRYTN account
Example:
Then click Save at the top of the screen. After saving your code changes, anytime the link is clicked from your Squarespace website, users will be linked to your desired booking path to view/purchase 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.
Customizing Button Colors
If you want to customize the colors for your product link, go back to your TRYTN account and navigate to Settings > Custom Theme and expand the +Buttons section.
Here you can select custom colors for the button background and/or text. Simply click the color block found under Background Color or Text Color to open a color editor tool that allows you to choose a customized color for each. You can use the dropper to copy a specific color from your desktop, enter a hex code, or simply play with the color slide and choose any variation in tone preferred using the large color box. There are lots of options here and you can play with this to get the exact palette you're looking for.
Be sure to select Save Changes before leaving the page to ensure your new button colors are retained.
If you would like assistance or have questions about adding TRYTN to your website, please message support@trytn.com.