This documentation is intended for development teams integrating Vimocity's Playlist and Player widgets into their applications or websites. You can embed these widgets using either an iframe or script tags. Each widget is a web component designed for seamless integration and customization.
Table of Contents
- Introduction
- Embedding Options
- Widget Properties
- Whitelisting Domains (Script Tag Method)
- Examples
- Contact Us
Introduction
Vimocity offers two embeddable widgets:
- Playlist (vimocity-playlist-embed): Displays a list of curated videos.
- Player (vimocity-video-embed): Displays a single video that rotates based on a specified frequency.
These widgets enhance user engagement by integrating Vimocity's content directly into your platform.
Embedding Options
You can embed the Playlist and Player widgets using one of the following methods:
Using an Iframe
The iframe method is straightforward and requires minimal setup.
Using Script Tags
Embedding via script tags allows for greater customization and integration but requires domain whitelisting for security purposes.
Widget Properties
Required Properties
- clientId: A unique identifier provided by Vimocity. This is required for both the Playlist and Player widgets.
- rotationFrequency (Player only): Specifies how often the current video should change, in days.
Optional Properties
- workerId: An identifier for the user using the widget. Improves reporting accuracy.
- email: The email address of the user. It also enhances reporting.
| 💡 Tip: For better analytics and reporting, we recommend passing at least one of the optional properties (workerId or email). |
Whitelisting Domains (Script Tag Method)
When embedding the widgets using script tags, you must inform Vimocity of the domains where the widgets will be embedded. For security reasons, it is necessary to whitelist your domains.
Action Required:
- Provide the list of domains to your Vimocity account representative.
- Wait for confirmation that your domains have been whitelisted before deploying to production.
Examples
Embedding the Playlist
Using an Iframe
|
<iframe src="https://embed.vimocity.com/v1/playlist/?clientId=YOUR_CLIENT_ID&workerId=WORKER_ID&email=EMAIL" height="450" width="540" title="Vimocity" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture;" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen ></iframe> |
Using Script Tags
|
<!-- Include the Vimocity Playlist script in the Head --> <script src="https://embed.vimocity.com/v1/vimocity-embeds/vimocity-embeds.esm.js "></script> <!-- Use the web component --> <vimocity-playlist-embed client-id="YOUR_CLIENT_ID" worker-id="WORKER_ID" email="EMAIL" ></vimocity-playlist-embed> |
Embedding the Player
Using an Iframe
|
<iframe height="400" width="540" title="Vimocity" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture;" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen ></iframe> |
Using Script Tags
|
<!-- Include the Vimocity Player script --> <script src="https://embed.vimocity.com/v1/vimocity-embeds/vimocity-embeds.esm.js"></script> <!-- Use the web component --> <vimocity-video-embed client-id="YOUR_CLIENT_ID" rotation-frequency="ROTATION_FREQUENCY" worker-id="WORKER_ID" email="EMAIL" ></vimocity-video-embed> |
Complete Example
|
<html> <head> <script type="module" src="https://embed.vimocity.com/v1/vimocity-embeds/vimocity-embeds.esm.js"></script> </head> <body> <vimocity-video-embed client-id="YOUR_CLIENT_ID" rotation-frequency="ROTATION_FREQUENCY" worker-id="WORKER_ID" email="EMAIL" ></vimocity-video-embed> </body> </html> |
| Note: Replace YOUR_CLIENT_ID, ROTATION_FREQUENCY, WORKER_ID, and EMAIL with your actual values. |
Contact Us
For domain whitelisting or any other inquiries, please contact your Vimocity customer service manager or email us at coach@vimocity.com.
Related to