Integration with SSR services

Overview:

This document provides a sample integration guide for BlinkLink's new Server Side Rendered (SSR) video feed with a web application.

The BlinkLink Widget is a tool designed to display dynamic content in a feed format on web pages. This integration guide provides step-by-step instructions along with explanations of the integration code components.

1. Integration Code

<div hx-ext="preload" hx-get="https://api.dev.blinklink.io/web/ui/carousel" hx-target="this" hx-trigger="load" hx-swap="innerHTML" hx-vals="js:{&quot;stream&quot;: &quot;YOUR_PAGE_NAME&quot;, &quot;placement&quot; : &quot;YOUR_FEED_LOCATION_ID&quot;, &quot;clientId&quot; : &quot;xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx&quot;, &quot;adaptiveAi&quot; : false, &quot;carouselMode&quot; : &quot;hover&quot;, &quot;miniPlayer&quot; : false, &quot;clickStream&quot; : false, &quot;recommendation&quot; :false}" class="">
<link href="https://ssr.sdk.dev.blinklink.com/css/bundle.css" rel="stylesheet">
<script src="https://ssr.sdk.dev.blinklink.com/js/bundle.js" data-endpoint="https://api.dev.blinklink.io/web"></script>

1. Configure Integration Parameters:

   • To customize the feed component, pass configuration parameters using the hx-vals attribute within the integration div.

   • Modify the hx-vals attribute according to your requirements. Below is an example configuration:

     hx-vals="js:{
       "stream": "YOUR_PAGE_NAME",
       "placement" : "YOUR_FEED_LOCATION_ID",
       "clientId" : "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx",
       "carouselMode" : "hover"
     }"

   • Adjust the values of the parameters to suit your specific use case.

     • "clientId" is the Key received by creating a channel in your marketer app

     • Each Page needs to have a unique page identifier eg- "HomePage"

     • Each feed needs to have a unique placement identifier eg-"homepageRecommendations"

     • One page can have multiple feed each with unique placement identifier

Benefits of Using Server-Side Rendered Version of Video Infrastructure:

1. Improved Performance: Server-side rendering offloads some processing burden from the client-side, resulting in faster load times and smoother user experiences. A screenshot of total component load time waterfall here in the image below. The total feed size is ~9kb.

1. Enhanced SEO: By rendering content on the server before sending it to the client, server-side rendering improves search engine optimization (SEO) by ensuring that search engines can index content more efficiently.

2. Consistent User Experience: Server-side rendering ensures that users receive a consistent experience across different devices and browsers, as the content is pre-rendered on the server.

3. Accessibility: Pre-rendered content can be optimized for accessibility standards, making it easier for users with disabilities to access and interact with the content.

4. Reduced Client Load: Offloading rendering tasks to the server reduces the workload on the client device, making it suitable for resource-constrained devices or environments.

5. Security: Server-side rendering can provide an additional layer of security by minimizing the amount of sensitive code exposed to the client-side environment.

Conclusion:

By following the above steps, you can seamlessly integrate the provided carousel component into your web application. Ensure to customize the integration parameters and styling according to your application's requirements.

Note: This integration process assumes a basic understanding of HTML and web development.