Skip to main content

Overview

SourceSync enhances web applications by integrating interactive and monetizable video elements seamlessly. This guide details the steps for developers to install and configure SourceSync, ensuring a smooth integration process into web applications.

Prerequisites​

Before integrating SourceSync, ensure you have:

  • Administrative access to your web application's backend.
  • Knowledge of HTML and JavaScript.
  • An active SourceSync account and access to the Kurator administration portal.

Step-by-Step Integration Process​

Step 1: Script Installation​

Begin by including the SourceSync JavaScript library in your web application. This script is essential for initializing SourceSync functionalities.

<!-- Add the SourceSync embed script to your HTML -->
<script defer src="https://embed.sourcesync.io/c/[YourUniqueIdentifier]"></script>
  • Defer attribute ensures the script loads after the HTML document has been parsed, preventing any blocking during page load.
  • Replace [YourUniqueIdentifier] with the identifier provided by SourceSync, which contains your specific configuration settings.

Step 2: Configuring the Embedder​

Configure the embedder to connect your video content with SourceSync's interactive features. This involves specifying CSS selectors that target video elements on your page.

// Configuration example
const config = {
  element: 'video#myVideo', // CSS selector for the video element
  clientId: 'YourClientID', // Provided by SourceSync
  options: {
    autoplay: true, // Example option
    controls: true, // Example option
  }
};
SourceSync.embed(config);
  • Element: CSS selector that points to your video element.
  • clientId: Unique client identifier provided by SourceSync.
  • Additional options can be specified based on your requirements and the features you want to enable.

Step 3: Testing and Validation​

After configuring the embedder, thoroughly test the integration on a development or staging environment before going live. Utilize browser development tools to simulate interactions and ensure all configurations are correctly implemented.

// Example testing script in Chrome DevTools
const testScript = document.createElement('script');
testScript.src = 'https://embed.sourcesync.io/test';
document.body.appendChild(testScript);
  • Execute this script in the console of your browser's developer tools to load and test the SourceSync functionalities.

Step 4: Going Live​

Once testing confirms that the integration works correctly, move the SourceSync script and configurations to your production environment. Monitor the application closely following deployment to catch and resolve any potential issues early.

Step 5: Ongoing Maintenance and Updates​

Keep the integration updated with the latest versions of the SourceSync script and API. Regularly review and tweak configurations to optimize performance and user engagement.

Additional Resources​

For more detailed information, visit: