Your TRYTN account offers an easy way to embed booking links onto shop websites hosted by WIX.
This article covers the following topics:
- Add TRYTN Embedding Code to WIX Websites
- Add Floating "Book Now" Button
- Add Direct Links to Products
Related Articles:
- Adding TRYTN to Your Website
- Squarespace Instructions
- 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 WIX Websites
Step 1: Retrieve Embedding Code from TRYTN
To generate embedding code to add to your WIX 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 WIX.
Step 2: Add Code to WIX
From your WIX website, start by clicking on Search in the main navigation. Search for Footer, click Custom Code > Open
On the Custom Code page, click + Add Custom Code at the top right.
Next, paste the code you copied from Step 1 into the text box highlighted below.
Enter a short, memorable Name for your code.
Select the option you prefer under Add Code to Pages:
All pages:
This adds the code to all of your site's pages, including any new pages that you create in the future. Choose whether to load the code only once per visit or on each page your visitor opens.
Choose specific pages:
Use the drop-down menu to select the relevant pages.
Finally, choose where you want to place your code under Place Code in "Body - end".
When complete, select Apply. After saving your code changes, anytime the link is clicked from your WIX 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 WIX website by adding the floating link code beneath the embedded TRYTN script on the WIX location provided above in Add TRYTN Embedding Code to WIX Websites.
STEP 1: Add TRYTN Embedding Code to WIX Websites (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 WIX
Go back to your WIX 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.
Then click Apply at the bottom of the screen. After saving your code changes, anytime the link is clicked from your WIX 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 WIX 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 WIX
Go back to your WIX 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.
Then click Apply at the bottom of the screen. After saving your code changes, anytime the link is clicked from your WIX 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.