Skip to main content

How to embed my Vimmi Video Widget on a native site?

Updated over 3 weeks ago

In this article

In this article, you’ll learn how to embed shoppable Vimmi videos (Solo Video, Video Mall, or Video Carousel) directly into your website — whether it’s built on a CMS, custom stack, or static HTML.

By the end, you’ll be able to configure, embed, and verify your Vimmi widgets across any page type — home, product, or landing.

Main Steps

  1. Upload a video → How to Upload a New Video

  2. (Optional) Create a playlist → How to Create a Playlist

  3. Create or open your embed → How to Get Your Embed Code

  4. Add your Website Destination

  5. Copy & paste your code into your site

  6. Verify and test playback

Prerequisites

  • You have a Vimmi account and access to the Console.

  • At least one video uploaded to Vimmi → see How to upload a new video

  • If you plan to use a Video Mall or Carousel, create a Playlist first → see How to create a playlist.

  • Your target domain added to Website Destinations

1. Open Embed Management

  1. Log in to your Vimmi Console.

  2. In the top navigation, click Embed Management. Need a full walkthrough? → How to get your embed code in Vimmi.

2. Choose your widget

  1. Click Create embed to make a new widget, or open an existing one from the Embed Management table (use search/filter by type). Need help locating an existing embed? See How to get your embed code in Vimmi.

  2. If creating a new one, pick a type:

    • Solo Video — one shoppable video.

    • Video Mall — multi‑tab gallery powered by playlists.

    • Video Carousel — horizontal slider of videos.

Create a new embed.png

Create embed

3. Configure your widget

  1. Source:

  2. Appearance:

    • Width / Height (percentage or px), Rounded corners

    • Video Fit Mode: Fit to Player (letterbox) vs Fill Player (crop to fill).

  3. (Video Mall) Tabs & playlists: add tabs, attach playlists, reorder tabs

  4. Click Save. Always remember to save so your changes are applied.

4. Copy the the embed code

  1. After saving, click Embed code.

  2. Copy the snippet — it includes a <script> tag and a <vimmi-watch-player-widget …> tag. Examples & details → How to get your embed code

Click Embed code.png

Copy the the embed code

5. Place the code on your site

Choose the method based on your stack.

A) Static HTML / template files

  1. Open the page’s HTML template.

  2. Paste the <script> once (in <head> or before </body> for faster first paint).

  3. Place the <vimmi-watch-player-widget …> where you want the player.

  4. Save, deploy, and open the page.

B) CMS (WordPress, Webflow, Wix, etc.)

  1. Add the <script> in your global Custom Code / Header settings (one time for the site).

  2. On the target page, insert a Custom HTML / Embed block and paste only the widget tag.

  3. Save & publish.

C) SPA/Framework (React/Vue/etc.)

  1. Load the script (via index.html or dynamic loader) before the widget is rendered.

  2. Render <vimmi-watch-player-widget config="…"></vimmi-watch-player-widget> inside your component.

  3. Ensure the script has initialized before first mount.

Website Destination (whitelist your domain)

Your embed will only run on approved domains.

  1. In Vimmi Console → Embed Management, open your embed.

  2. In Website destination, paste your site URL (e.g., https://www.yoursite.com) → click +.

  3. Click Save.

Add your Website Destination.png

Website Destination

Verify it works

  1. Open the published page (ideally in an incognito window).

  2. Confirm the player loads, video plays, and overlays (if any) appear on cue.

  3. If nothing appears, run the Troubleshooting checklist below.

Troubleshooting

  • Widget not showing

    • Paste the entire snippet (both <script> + widget tag).

    • Is your domain allow‑listed?

    • Did you Save the embed after editing?

    • Any CSP/ad‑blockers blocking vimmi-widgets.vimmi.net?

  • Multiple widgets on one page

    • Include the <script> once per page; add multiple widget tags as needed.

    • Consider lazy‑loading if you embed many players.

  • Layout / sizing problems

    • Tweak Width / Height / Fit mode in the embed.

    • Check parent container CSS (max-width, overflow, position).

  • Changes not updating

    • Clear cache / use incognito.

    • Save in both Vimmi and your site CMS/HTML.

  • Styling inside Shadow DOM (advanced)

    • Vimmi widgets may render in Shadow DOM; avoid relying on external CSS to style internals. Style the container instead.

FAQ

  • Can I reuse the same script across pages?
    Yes, paste it once per page. Across different domains, add each domain to Website Destinations and use the appropriate config.

  • Where do I change the poster/thumbnail?
    In the video editor. See How to upload a new video

Related articles

Did this answer your question?