Testing, development or staging environments allow you to test how the Videoly widget looks and performs on product pages before promoting it into production. These also help to test the widget when modifying the template: this way you gain visibility of how changes affect the widget’s functionality.
Setting up your test domain in MyVideoly
By default, the widget is configured to work only in your production domain.
To keep the widget functioning properly in non-production environments, you can add them in MyVideoly by editing the list of 'active domains' under Settings.
Once you have done this, you will see the widget with hardcoded videos on each product.
If you only want to test the widget’s appearance on one or two products, you can also add parameter ?vdly-preview=1 to the URL of a product page.This will override the domain filtration rules and pass the request. This parameter will show the widget with hardcoded video thumbnails.
How to whitelist your test domain in MyVideoly
- Click on Settings and the General tab
- From Active Domains click 'edit the list'
- Paste in your test domain URL and click 'Add to the list'
- Search the added domain name from the list, tick the box
- Click 'Save'.
💡This function only allows you to add test domains, not production domains
💡Any changes you make in MyVideoly will affect our solution on all your active domains – both testing and production environments!
Changes with the template
If you are running a different template in the development environment, widget configuration may have to be adjusted to it.
Videoly collects product information from certain elements on the page.
The positioning for the widget is defined in relation to certain DOM-elements.
The widget needs the following elements to function:
- Element containing product title
- Element containing product ID
- Element to define the location of the widget
If the Videoly-script is initialising on the page, but no videos are shown even with ?vdly-preview=1 URL parameter, it means that at least one element is missing.
You can supplement the widget with necessary product information, which you can share in certain placeholders.
You can also add the 'element defining the widget location', which is utilised by default.
We are happy to help you configure an account.
In this case, we find it helpful to have access to the testing/development environment. Here we can interact with a new layout and make sure everything is in place :)