We now have custom web widgets to help you seamlessly integrate your tour templates into your website’s overall look and feel, providing a great user experience. It’s designed with lean, efficient code that minimizes loading times, so your website performance won’t be affected.
Step-by-Step Guide to Embedding Content Using Share Tour Web Widgets.
- Go to your Tour Templates to get your Shared Tour links.
- Click the Share Tour button of the tour you want to share on your website.
- Scroll down the form and select Web Widgets.
- Click Add Web Widget button.
- Select the Type Choice (how you’d like the tour to appear on your website), fill in the intro text and CTA button text.
- Choose if you want to use the WordPress Shortcode or HTML shortcode.
- If you’re using the Wordpress Shortcode, you’ll have to install the SafariOffice WordPress Plugin. Here’s how to install the plugin.
- Highlight the code provided and copy it to your clipboard.
- Now paste the code to your website.
For WordPress users:
- Go to your dashboard and navigate to the page or post editor.
- Switch to the "Shortcode" or "HTML" view in the editor.
- Paste the code where you want the widget to appear.
Using HTML Shortcode
- Open the HTML file for the relevant page in a text editor or your website builder.
- Insert the code in the appropriate section, such as within a <div> or <section>.
Then view the page to ensure the widget is displaying correctly and functions as intended across devices and browsers. (See the example below.)
Widget Settings
Did you know you can save time by setting a default appearance for your tour widgets?
Visit your Settings> Marketing> Share Tours.
Here, you'll find Widget Settings, where you can choose the default look for your tour, including the view and CTA button.
Once set up, every time you share tours to your website, they’ll automatically appear with your preferred design—no need to customize each time. It’s a quick and efficient way to keep your site looking professional and consistent!