DEV Community

Cover image for Content SaaS | Integration with Youtube
ksalic for Bloomreach

Posted on • Updated on

Content SaaS | Integration with Youtube

Recently Bloomreach Content (SaaS) released a feature, Integrations Library - UI Extensions. By using this feature, you can add your document field extensions as a custom integration. This opens up new possibilities to create content-type fields of your own.

In the following example, we will show you how the "Youtube integration" works from a functional point of view and how to install this as a developer.

When the Youtube integration is enabled in your Bloomreach Content SaaS channel you can add a component and browse through the youtube video catalog. Free text search is available to filter the results and with the returned results, whenever you hover over the thumbnail you will see a video preview. Click on the video element to add the youtube video link to your page.

The integration can also be configured to only show videos from a particular youtube channel.

Installing the Youtube integration as a Developer

When adding the custom integration through the "integrations" dashboard make sure to add the following parameters:

Application URL: https://youtube-integration.bloomreach.works/
Configuration: {"apiKey":"[youtube-api-key]"}
Height: 170
CSP:

frame-src:["youtube-integration.bloomreach.works","www.youtube.com"]
Enter fullscreen mode Exit fullscreen mode

Image description

Configure the integration to allow browsing through a single youtube channel:

Configuration: {"apiKey":"[youtube-api-key]", "channelId" : "[your-channel-id]"}

OpenUI String field

An Open UI String field uses the document field extension point to display a custom field type.
When a Youtube integration is available, document editors can add an Open UI String field to the desired document type and link it to the integration, using the UI extension drop-down like below.

Image description

Once the Open UI String field is correctly configured, editors are able to include Youtube videos directly within the document or component field group.

Top comments (0)