This Koopid Tech Note covers steps needed to embed a publicly accessible video hosted by an outside streaming service (like YouTube) into Koopid workflows.
Adding Video URLs to WorkFlow
Once you’re logged into the Koopid platform for your provider, toggle into Expert Mode at the top of the left side menu, and expand the Services menu.
- Under Services, click on Expert Flows.
- Create a new workflow or open an existing workflow where you want to embed a video.
- With your workflow open, select and drag the Send a Message component from the right side-menu to the design workflow screen.
- Select the new component on your screen, and in the Send a Message Output Component Settings menu on the right, update the Message Type to Plug-In and update the Media Type to URL.
- On the “Or Enter Path or URL” field add the public URL you want to embed into your workflow.
*Note: This URL needs to be a publicly accessible URL setup to allow users to embed the URL into their website or application. This DOES NOT work with any general URL.
- To embed YouTube videos in a workflow, instead of using the URL in the address bar of the video page, right click on the video on the YouTube or other video hosting website, and copy the embed code for the video.
- Pull the URL out of the embed code. This is the URL to paste on the Or Enter Path or URL field shown in the screen shot above.
- Example embed code with URL highlighted: <iframe width=”1035″ height=”582″ src=”https://www.youtube.com/embed/TgVQpoTCDAA” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
- Next, style the size of the embedded video window that appears in the workflow. On the Send a Message settings screen, add CSS code on the field that says Add style CSS to set how the video should display in the workflow. (Ex: width: 500px; height: 500px; border: none;)
- Next, add a Node Title a few fields down to help identify the component in your workflow.
- Finally, SAVE your workflow by clicking the Save button in the top right corner of the page.
- The workflow is ready to test or deploy from the Manage page, found under the Experience sub-menu in the left column.
Using Cross-Origin Video URLs
Use of a video URL straight from the address bar after visiting a website that has a different origin, and is NOT setup to be embedded into another web application, will result in a CORS error. The video will not appear embedded in the workflow, and will show a form of the error below.
*Note: If the origin of the URL is DIFFERENT from the application URL, and the video is not setup to be embedded, you are not able to use the link to embed the video into a workflow. If you control the website and URL you are embedding into the application, you need to update the settings of the external link being embedded to change the origin to be the same as the URL for the application.
Other Video Embed Options
For externally hosted videos not setup to be embedded on other websites, you could also redirect the user by adding a link to the video in the workflow, which would open in a new browser window.