Appearance

Videobot URL Map ​

Overview ​

When using this feature, user can speficify a Videobot to be used in specific pages on the website. This is useful when you want to use different Videobots for different pages.

WARNING

This feature is still experimental and will need to be enabled by the admin. Please contact us if you want to use this feature.

How it works ​

The Videobot will take current pathname from the URL and compare it with the list of URL patterns that you have specified in the Videobot URL Map. If there is a match, the Videobot will be displayed. If there is no match, the original Videobot will be displayed.

Example

On URL https://example.com/computer/macbook-pro, the Videobot script will take the pathname /computer/macbook-pro and compare it with the list of URL patterns that you have specified in the Videobot URL Map. If there is a match, the Videobot will be displayed. If there is no match, the original Videobot will be displayed instead.

How to use ​

  • Go to Videobot Settings on Dashboard and find URL Map section
  • Click Add URL button to add a new URL pattern
  • Put the exact URL into the URL field, and pick a Videobot from the Videobot dropdown
Screenshots

Videobot URL Map

  • Modify and add more URL patterns as you wish; finally click Save button to save the changes

TIP

The URL will be stripped domain part (for example: https://example.com) after saving. This is intended so do not worry about it.

Client-side instruction ​

  • Add embed code getting from Videobot Dashboard to your website like normal
  • For non single page app (non-SPA) website, the feature will work automatically
  • For single page app (SPA) website, you will need to call window.Videobot.refresh() function to refresh Videobot on page change

WARNING

Each different SPA framework will have different way to call function on page change. Please refer to your framework documentation for more information, or contact us if you need help.

URL Mapping ​

This features allows you to use the same embed code across your website, but show different content based on the subpage the user is navigating.

Selecting Your Default Videobot ​

After logging in, head to the "Videobots" tab to see all available Videobots. Pick one to be the main point of interaction on your site.

In the editor menu of your chosen Videobot, find the "Share & Embed" option. Ensure that you are under the Widget tab. Click Save and Get Code to generate the HTML code you'll need, then copy the HTML code.

Embedding the Code on Your Website ​

With the HTML code copied, you're ready to integrate it into your site. The goal is to embed the code so that it is present on every single page of your website.

Important! ​

If you are using a CMS platform (Wix, WordPress, Hubspot, Squarespace), refer to CMS Platforms

Follow the steps in your guide or choose one of the options below:

  • Header or Footer: Inserting the code in the site's header or footer is the most straightforward method, ensuring it loads across all pages.
  • Theme Files: For those comfortable with their website's backend, embedding the code directly into the theme files is another effective strategy.
  • Google Tag Manager (GTM): Utilizing GTM allows for efficient deployment across all pages, catering to those who prefer a more centralized control.

Ensure the Widget is Visible on Every Page ​

Before proceeding with URL mapping, it's crucial to ensure that the Videobot is visible on every page of your website. The code must be embedded across all pages to facilitate successful overwriting in subsequent steps.

Customizing Videobot Visibility with URL Map ​

The URL Map allows you to assign different Videobots to specific URLs on your website. This flexibility means you can have different interactions tailored to the content of each page, all while maintaining the default Videobot as the primary interaction point unless overridden.

Steps: ​

  1. Access Videobot Settings: Go to your default Videobot and press the “Settings” tab.
  2. Locate URL Map: Scroll to find the URL Map option.
  3. Activate URL Map: Enable it to start customizing your Videobots' visibility.

Customization: ​

  • Specify URLs: Paste the URLs where you want a different Videobot to appear.
  • Choose Videobots: Assign a specific Videobot to each URL.

If you wish to hide the default Videobot on certain pages, enable the “Disable Default Bot Option” to remove the default Videobot from all pages, except those where you have specified a different Videobot to appear.

Final Step: ​

Save the changes by pressing the Save button on the upper right corner. Reload your website to see the changes appear on the specified URLs.

Woohoo, you did it! 🎉 You've successfully implemented Videobot’s single code implementation for widgets on your website!