Adding Videos To Your Website With Collections
One of a Collection's features is the ability to embed onto other websites, allowing for more control over who views your video content and where they view it. This article provides work steps for embedding a Collection on your website using some of the most common website builders.
Note: A Collection can be embedded in virtually any place where HTML editing is allowed.
Jump to:
- How to Access a Collection's Embed Code
- How to Embed a Collection on WebFlow
- How to Embed a Collection on Wix
- How to Embed a Collection on SquareSpace
- How to Embed a Collection on Shopify
How to Access a Collection's Embed Code
To add a Switcher Player to your website, you need to get the embed code for the player from your Switcher Dashboard. Once the code is copied, you can paste it into your website builder to publish the player on your website.
To access your Collection's embed code:
- Go to the Switcher Dashboard in a web browser.
- Click Video Catalog in the left sidebar.
- Click the Collection you would like to use.
- Click Copy Code in the Embed Code section.
- Your Collection's embed code will now be copied to your clipboard.
How to Embed a Collection on WebFlow
- Go to your WebFlow page editor.
- Click the plus icon in the top left to open the Add panel.
- Click Embed.
- Paste your Collection's embed code.
- Save and close the modal window.
How to Embed a Collection on Wix
Wix requires the configuration of custom settings in order to embed a Collection on a website. This walkthrough covers every step in order to embed your Collection on a Wix website. If you would like assistance at any step of the process, please to contact Switcher's support team at support@switcherstudio.com.
Add Switcher’s custom code to your website (required)
- Go to your Wix page editor.
- In the Tools & Settings section, select Custom Code.
- Click Add Code below “Body - End”.
- If you already have code here, click the ellipses and select Edit Code.
- Paste the following code snippet in the “Paste Code Snippet Here” field.
<script src=“https://player.switcherstudio.com/embed.js”></script>
- Select All Pages below “Add Code to Pages:”
- Click Apply.
Note: This custom code allows Wix to utilize Switcher Player. This code must be applied to the footer or “Body - End” of every web page. You will only need to complete these steps one time in order to add Switcher Players to your website.
Generate your custom Switcher Player URL (required)
- Go to the Switcher Dashboard.
- Click Video Catalog in the left sidebar.
- Select the Collection that you would like to embed.
- Locate the Share Link for the Collection
- Copy the portion of the URL following the equal sign. For example, https://player.switcherstudio.com/watch?p=1df8a01f-ad4f-4e42-a74f-2b1eb89f03d2
- Add the copied text to the end of the following URL.
https://player.switcherstudio.com/cms/wix?videoPlayerId=
- The outcome will result in a custom Collection URL that can be used when you embed the Collection on your Wix site. For example, "https://player.switcherstudio.com/cms/wix?videoPlayerId=1df8a01f-ad4f-4e42-a74f-2b1eb89f03d2". You will use your custom URL in the following steps.
Add the Collection's player element to your Wix website
- Go to your Wix page editor.
- Click the plus icon on the left sidebar to open the “Add Elements” panel.
- Go to Embed Code, then Popular Embeds, and click the plus icon next to “Custom element”.
- Once the Custom Element has populated on the page, click Choose Source.
- In the modal, select Server URL.
- Paste your custom Switcher Server URL in the “Server URL” field.
- Click Update.
- Change the tag name to “switcher-player”.
- Note: This is necessary for the embed code to work properly.
- Close the modal and click Publish in the top-right corner.
How to Embed a Collection on SquareSpace
- Go to your Squarespace admin page.
- Click Pages in the left sidebar.
- Click the page you would like to use.
- Click Edit in the top-left corner of the page preview.
- Click Add Block.
- Click Embed.
- Click Code Snippet.
- Click Embed Data.
- Paste your Collection's embed code into the text field.
- Hover over Done in the top-left corner and click Save.
Note: The preview page may display “Script Disabled”, but this only appears in the page editor. When you save the changes, your Collection will appear.
How to Embed a Collection on Shopify
- Go to your Shopify admin page.
- Click Online Store in the left sidebar.
- Click Pages in the left sidebar.
- Click the page you would like to add your Collection to.
- Click <> in the top-right corner of the text editor.
- Paste the Collection's embed code into the text editor.
- Click Save in the bottom right corner.