Video Tutorial
Migrating Videos
Log into your Wistia account, navigate to Account >> Settings >> API Access and copy the Master Token.
In Spotlightr, within Add Videos of an existing or new Project, switch to the Migrate tab, select Wistia from the drop-down list, paste your token and click on Get Videos.
By default, all videos from your Wistia account will be selected. You can select all/individual videos or just a few desired Projects which you wish to import and click on the button Import.
Once the Import process is completed, you will see the following screen:
All of your selected videos will be transferred from Wistia to your Spotlightr account and should appear in the Dashboard. If they don't, try refreshing the page.
For any further questions, you can contact our Support Team.
CSV Export for Changing Embed Codes
During the migration we record the video ID of the Wistia videos and match it to the corresponding Spotlightr video IDs. And then we put that info in the project CSV that you can then export.
This information will help you when changing your embed codes on your website from Wistia to Spotlightr. When you're on a page that has Wistia embed code, just copy the video ID and search for it in the CSV file. Then you'll see the Spotlightr video ID for that video.
For example, your file will look like this:
Column D is the Wistia video ID and column E is the corresponding Spotlightr video ID.
When you are replacing the Wistia embed code for Video 1, you'll just remove that embed code and then paste in the Spotlightr embed code:
<div style="position:relative; width:1px; min-width:100%;padding-bottom:56.25%;"><iframe allow="autoplay" class='spotlightr' allowtransparency="true" style="width:1px; min-width:100%; height: 100%; position:absolute" allowfullscreen="true" src="https://billzimm.cdn.spotlightr.com/watch/XXXXXXXXX?fallback=true" frameborder="0" scrolling="no" name="videoPlayer"> </iframe></div>
Where you see XXXXXXXXX you replace that with the Spotlightr video ID, which in the case of Video 1 is: MTQ2NDQyMw==
So now your embed code is this:
<div style="position:relative; width:1px; min-width:100%;padding-bottom:56.25%;"><iframe allow="autoplay" class='spotlightr' allowtransparency="true" style="width:1px; min-width:100%; height: 100%; position:absolute" allowfullscreen="true" src="https://billzimm.cdn.spotlightr.com/watch/MTQ2NDQyMw==?fallback=true" frameborder="0" scrolling="no" name="videoPlayer"> </iframe></div>
Script - Swap Video on Page Load
We've also developed a script to help you in the process of moving from Wistia to Spotlightr.
Just add this script to the <header> section of pages with Wistia videos, or just add it site-wide, and when the page loads the script will search our database for the Wistia video ID that is present in the embed code on that page. If it finds it then it switches out that video with the corresponding Spotlightr video.
Check the video at the beginning of this article to see how that works.
Here's the script you add:
<script>
function getIframeWithSrc(t){return`<iframe allow="autoplay" class='spotlightr' allowtransparency="true"style="width:1px;min-width:100%; height: 100%; position:absolute" allowfullscreen="true"src=${t}frameborder="0" scrolling="no" name="videoPlayer"></iframe>`}window.addEventListener("load",(()=>{const t=document.querySelectorAll(".wistia_responsive_padding");t?.forEach((t=>{const e=t.querySelector(".wistia_embed")?.getAttribute("class"),r=e.match(/async_(\w+)/);if(r&&r[1]){const e=r[1];let i="";fetch(`https://api.spotlightr.com/fix/replaceWistia?altID=${e}`).then((t=>{if(!t.ok)throw new Error("Network response was not OK");return t.json()})).then((e=>{if(!e.encodedSpotlightrID)return;i=`https://videos.cdn.spotlightr.com/watch/${e.encodedSpotlightrID}?fallback=true`;const r=document.createElement("div");r.style="position:relative; width:1px; min-width:100%;padding-bottom:56.25%;",r.innerHTML=getIframeWithSrc(i),t.firstElementChild.style.zIndex="-1",t.style.padding="unset",t.insertBefore(r,t.firstChild)})).catch((t=>{console.error("Error:",t)}))}}))}));
</script>