> ## Documentation Index
> Fetch the complete documentation index at: https://docs.demokraft.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrating and Customizing Playlist Widget

> Learn how to integrate, style, and configure the Demokraft AI playlist widget to seamlessly deliver curated video and document content on your website.

<Frame>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/061HE1V31y4?si=PhhcIxPN8AZvtzlP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

## Overview of Playlist Link Integration

This feature enables you to integrate a playlist link directly with your website, providing seamless access to your curated video content. Integrating the playlist link allows visitors to interact with your multimedia resources via a website-embedded widget, enhancing engagement and content discoverability.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/dca5540c-3f1e-494a-950f-ef227365a8d7/studio/2777c7aa-a7ec-4624-9adc-340bbe938e47/video_screenshot_file/frame_0.jpg" alt="Playlist Widget Overview" />
</Frame>

## Preparing and Accessing Integration Settings

To begin integration, follow these steps:

1. Log in to the **Demokraft AI** app.
2. Ensure your playlist contains all desired videos and documents.
3. Designate one playlist as the **default**; this playlist will serve as the primary content playlist for your website integration.
4. Navigate to the **Settings** section.

Next, open the **Widget** section where you will find the integration code options, including:

* Website snippets
* I-frame configurations
* Direct playlist links suitable for embedding

These resources enable your website developer to implement the playlist widget efficiently within your website environment, typically requiring only a few minutes for complete integration.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/dca5540c-3f1e-494a-950f-ef227365a8d7/studio/2777c7aa-a7ec-4624-9adc-340bbe938e47/video_screenshot_file/frame_2.jpg" alt="Accessing Integration Settings" />
</Frame>

## Customizing Widget and Watch Demo Button Appearance

You can configure how both the widget and the accompanying **"Watch Demo"** button appear on your website. This includes customizing:

* **Button style**
* **Button text**

The **Watch Demo** button functions as the means for website users to access your playlist in a conversational interface via widget. Tailoring its look and text improves user interaction and aligns the button with your website's design and messaging.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/dca5540c-3f1e-494a-950f-ef227365a8d7/studio/2777c7aa-a7ec-4624-9adc-340bbe938e47/video_screenshot_file/frame_3.jpg" alt="Button Customization" />
</Frame>

## Fine-Tuning Widget Design with Theme and Brand Kit

Use the **Theme** section to further customize the widget's look and feel, enabling adjustments to visual elements to ensure complete brand consistency.

<Note>
  **Pro Tip:** For users on higher-level plans, the **Brand Kit** offers enhanced control over widget and button colors, allowing you to maintain a cohesive experience that reflects your corporate identity and strengthens brand recognition across all touchpoints.
</Note>

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/dca5540c-3f1e-494a-950f-ef227365a8d7/studio/2777c7aa-a7ec-4624-9adc-340bbe938e47/video_screenshot_file/frame_4.jpg" alt="Theme and Brand Kit Customization" />
</Frame>

## Configuring User Form Fields for Widget Access

Before users can access the widget content, you can configure the form fields that they must complete.

* **Required Field:** At a minimum, the **Email** field is required for access.
* **Optional Fields:** Additional fields can be added or customized according to your unique data collection needs.

This configuration effectively facilitates lead generation and user profiling while providing granular control over the user information collected during content interaction.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/dca5540c-3f1e-494a-950f-ef227365a8d7/studio/2777c7aa-a7ec-4624-9adc-340bbe938e47/video_screenshot_file/frame_5.jpg" alt="Form Field Configuration" />
</Frame>

## Adding and Customizing Welcome Text

Personalize the user experience by adding custom welcome text that appears when a new user opens your playlist link. This text can be fully customized to:

* Introduce the content
* Set clear user expectations
* Provide specific instructions

Custom welcome messages significantly enhance engagement and onboarding support, ensuring users feel guided and informed as they begin interacting with your playlist.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/dca5540c-3f1e-494a-950f-ef227365a8d7/studio/2777c7aa-a7ec-4624-9adc-340bbe938e47/video_screenshot_file/frame_6.jpg" alt="Welcome Text Customization" />
</Frame>

## Widget Interaction and User Access

After configuring and embedding the widget on your website, users can easily click the designated button to open it. They will then interact with your content through the demo app or the playlist viewing app integrated directly within the widget.

This interaction flow provides a highly streamlined experience, allowing users direct, friction-free access to your curated multimedia content in a conversational and user-friendly manner.
