Mobile

Mobile Optimization

On average, mobile traffic accounts for 10-30% of B2B traffic (that’s right, it’s not just big B2C brands that drive mobile visits). So naturally, you should be able to build mobile-optimized tours for your visitors that arrive at your site on a mobile device. ​ Mobile Optimization is available for all Tourial accounts, but is turned off by default.​

Enabling Mobile for your Tour

1. Open the tour you want to create a mobile version for

2. Click the ⚙️ icon in the upper right corner of the studio

   
3. Select the Mobile tab in the Settings pop-up window

   
4. The Mobile tour enabled and Mobile tour button will toggle on. ​

   The mobile tour button would display on a mobile device wherever your tour is embedded. Clicking the button links to your live Tour URL (i.e. tours.acme.com/pages/product-tour) where it'd display the mobile variant. ​ 🛑 You do not have to have the mobile tour button enabled to display your mobile-optimized tour on mobile devices. If this toggle is turned off, visitors would automatically see the mobile-optimized version of your tour without having to click a button to view it in a new tab. ​

Note: If you turn the button on or off after your Tour is live, be aware that the embed code automatically updates and you'll need to replace the embed code wherever the tour is embedded.

Customizing the Mobile Tour button

Should you choose to enable the mobile tour button, you can then style it to fit your brand.

Building for Mobile

Now, you'll see Mobile responsive: ON at the top of the builder. When you select the mobile icon, your viewport updates to a mobile-sized canvas. ​ Screens and tooltips from your desktop tour automatically copy over so you don't have to start from scratch. Then you can edit the tooltip styling, copy, and placement for mobile!