How to Set Up and Use Screenweave’s Custom Video Embedding Feature

Custom share links allow you to embed AND share Screenweave videos in your own website. Why do this? Most video sharing platforms create links back to their websites and play your videos with their advertising around it. Screenweave allows you to share your videos in your website so you can control all the content an attain authenticity by sharing your company's URLs. This is a bit more technical of a feature to set up, but your webmaster will surely help you out.

‍

Set Up Your Website for Video Embedding

Before you create a custom share in Screenweave, you need to design the landing page on your website where the videos will be embedded. This involves setting up the template page that will automatically update with new video content.

‍

You will need a few elements.:

• Add a script tag <script src="https://app.screenweave.com/sw-share-embed.js"></script> before the </body>
• Add a <div> for the video player that is tagged with the data-sw-video attribute
• Optionally, add a <div> for the title that is tagged with the data-sw-title attribute
• Optionally, add a <div> for the description that is tagged with the data-sw-description attribute

‍

For Webflow (Example)

1. Design Your Landing Page:
   • Create a webpage in Webflow, adding elements such as a video placeholder, title, description, and any additional features like scheduling links (Calendly) or contact forms.
   • In Webflow, assign custom attributes to these elements (e.g., data-sw-video for the video section, data-sw-title for the title, etc.). These attributes allow Screenweave to dynamically populate the relevant data onto the page.
2. Embed the Script:
   • Add the embed code or script provided by Screenweave to your Webflow page. This ensures that the video link is connected with the page template.
   • After publishing, Screenweave will automatically embed new videos to this page when you share them through your custom link.
3. Test the Integration:
   • Go back to Screenweave, select a video, and use the custom share link (created in Step 1) to check if the video, title, and description are correctly populated on the Webflow landing page.

‍

For WordPress

1. Create a Landing Page:
   • In your WordPress dashboard, go to Pages and click Add New.
   • Design the page as you want, using blocks for the video section, titles, and descriptions.
2. Add Custom Attributes (Using a Plugin):
   • To add the custom attributes that Screenweave uses, you can use a plugin like Custom Fields or Advanced Custom Fields (ACF).
   • Create custom fields in your template for elements like video (data-sw-video), title (data-sw-title), and description (data-sw-description).
3. Embed the Code:
   • Add the Screenweave embed code to the video block in the WordPress editor. The custom fields will be filled dynamically with the content of the shared video from Screenweave.
4. Test:
   • Use the Screenweave custom share link to embed a video on the WordPress landing page and verify that the video, title, and other details appear as expected.

‍

For Squarespace

1. Create a New Page:
   • In the Squarespace dashboard, go to Pages and create a new page.
   • Insert a Code Block where you want the video to appear on the page.
2. Embed Custom Code:
   • Add the Screenweave embed code to the Code Block, which will handle the video’s dynamic loading onto the page.
   • You can also use custom code injection if you need to assign attributes like video title or description to specific page sections.
3. Customize with CSS:
   • If you want additional styling or need specific layout changes, use Squarespace’s CSS editor to adjust how the embedded content appears.
4. Test the Integration:
   • Share a video through Screenweave’s custom link and check if the page is updated automatically with the correct video and metadata.

‍

For Wix

1. Create a New Page:
   • From the Wix dashboard, navigate to Site Pages and click Create New Page.
   • Design the page layout to include sections for the video, title, description, and any other interactive elements like forms or links.
2. Add Custom Code:
   • Use the HTML Embed feature in Wix to add the Screenweave embed code into the page. You can place the embed code in a specific area where you want the video to appear.
3. Dynamic Content:
   • Wix does not natively support custom attributes like data-sw-video, but you can use JavaScript in the embed code to handle the dynamic loading of video content from Screenweave.
4. Test:
   • Share a Screenweave video and verify that it populates the correct video and metadata on your Wix page.

‍

Setting Up Your Custom Share in Screenweave

Once you have your website template set up, create an organization wide or personal share link.

Organization-wide share link

• Go to "Manage Team" under your account settings
• Click the "Custom Shares" tab
• Create a New Share with a name and the URL of the webpage you set up above

Personal share link

• Go to "Profile" under your account settings
• Create a New Share with a name and the URL of the webpage you set up above

Using your new link

Go to the Share Links for any public video and you will be presented with your Custom Share links. Copy these links to share that video in your own website.

‍

Managing Your Embedded Videos

Once the setup is complete, managing and sharing videos you would like to be populated on your custom landing page is straightforward. After recording a video and setting the video to embedded in the video share menu, Screenweave will automatically embed it into the designated landing page, updating the video title, description, and content without the need for manual website editing.

‍

Common Use Cases

• Sales Teams: Sales professionals can set up custom landing pages that feature a personalized video message, contact information, and a scheduling link. Each time a new video is recorded and shared in this fashion, the landing page updates dynamically without the need for creating a new webpage.
• Marketing and Product Demos: Marketing teams can use a single landing page to showcase product demos. The page will automatically update with the latest demo video whenever new content is shared.
• Internal Training: HR departments can create training pages where onboarding videos are automatically updated with the latest instructional material. This ensures that employees always have access to the most current resources without having to re-upload content.

‍

Troubleshooting and Tips

• Custom Attribute Errors: If your page isn't updating correctly, check that the custom attributes (like data-sw-video or data-sw-title) are correctly assigned to the video and text fields in your website builder.
• Styling Issues: If the embedded video doesn't display properly, you may need to adjust the CSS on your website to ensure the video player and metadata are styled according to your brand's guidelines.
• Link Testing: Always test your custom share link by previewing the webpage before sharing it widely. This ensures that the video embeds correctly and the content displays as expected.

‍