Widgets
      Back to home
      1. Operator Help Center - TourRadar
      2. Direct Booking Solution
      3. Widgets

      How to Integrate Our Widgets Into Your WordPress Site Using the Link option?

      Please follow the steps below on how to integrate our widgets directly onto your WordPress website.

      Widget Integration Steps

      1. Log into your Operator Dashboard, click on the 'more' tab, then 'Direct Booking Solution', and select 'Widget Center'.
      2. Here you can select the widget you want to integrate. After selecting your specific widget, you can find detailed steps for each widget in the linked articles at the bottom of this page here.
        Screenshot 2024-04-24 at 1.48.45 PM-1
      3. Once clicked, you will see a preview of the widget and how it will appear on your website, select 'Next' to proceed to the customization of your widget.

        Screenshot 2024-04-24 at 1.53.02 PM
      4. Customize the widget to fit your preferences. There are unique customization options for both general widgets and adventure-specific widgets. 

      5. You can click the 'Preview widget' button, to see if you are satisfied with the widget.

      Screenshot 2024-03-20 at 11.44.55 am

      6. After you have finished customizing your widget, you will need to select 'Generate code' to get the code to integrate your widget. Clicking 'Generate code' will automatically take you to the next step of the integration process. 

      7. Integrate your widget using the steps below for the link option.

      How to Integrate a Widget Using the Link Option in WordPress

      Please be aware that the link option is specifically designed for the Contact Us and Ask a Question Widget. If you wish to utilize the other available TourRadar Widgets, you can opt for the embedding option instead. Further details on this option can be found here.

      For more information regarding WordPress, see their website here.

      1.  Create the widget using the Link option. You will need to open your WordPress page in a different tab. 
        Screenshot 2024-03-19 at 5.33.44 PM
      2.  Go to WordPress and edit the website page where you want the widget to appear, then click on the “+” sign.
        Screenshot 2024-03-19 at 3.20.07 PM

      3. Click on Custom HTML.
        Screenshot 2024-03-19 at 3.21.34 PM

      4. If you want the widget to be opened on the same page, paste the following HTML code by replacing YourLink with the link you received when you created the widget in your Operator Dashboard:

      <a href="YourLink" onclick="window.open(this.href, '_self'); return false;">Ask a question</a>

      ------------------------------------------------------------------------------------------------

      - Make sure you also change the anchor text in the HTML code to match the widget you are linking:

      >Ask a question</a>
      >Contact Us</a>




      5.  If you want the widget to be opened in a new tab paste the following HTML code by replacing YourLink with the link you received when you created the widget in your Operator Dashboard:

      <a href="YourLink" onclick="window.open(this.href, '_blank'); return false;">Ask a question</a>

      ------------------------------------------------------------------------------------------------

      - Make sure you also change the anchor text in the HTML code to match the widget you are linking:

      >Ask a question</a>
      >Contact Us</a>

       

       
      6. If you want the widget to be opened as a popup paste the following HTML code by replacing YourLink with the link you received when you created the widget in your Operator Dashboard:

      <a href="YourLink" onclick="window.open(this.href,'popup','width=600,height=600'); return false;">Ask a question</a>

      ------------------------------------------------------------------------------------------------

      - Make sure you also change the anchor text in the HTML code to match the widget you are linking:

      >Ask a question</a>
      >Contact Us</a>

       

      7.   Save the changes, refresh the website and the widget should appear.

      If you are having problems integrating your TourRadar Widget(s), please email us at partner-solutions@tourradar.com with more information about the situation.