# HTML5 Integration
The Web SDK allows HTML5 integration of previews generated by the Lucid preview generation portal. Detailed instructions are included below for integration.
### Step 1: Add SDK initialization script to your website
Lucid requires a line of JavaScript code to initialize our AI assistant. Include this line of code on any page of your site where you want to use Lucid. Please paste the SDK initialization script near the bottom, or close of your page's \ tag.
Your SDK JavaScript code will look similar to the example below. Copy your site's SDK initialization code, with your unique token, from your Lucid portal.
```javascript
// Some code
```
### Step 2: Add preview videos to your website with an embed
Lucid will easily replace your site's static video thumbnail images with AI-enhanced short video previews. In many cases the Lucid preview will automatically replace your site's thumbnail images without any manual input on your part. In addition to automatic embedding, you have the ability to manually replace an image with an AI-generated preview video. Plus, you have full control over how previews are displayed on your site.
You can add the following attributes to customize your previews in with the Lucid SDK.
* **Video attributes**
* client-content-id
* video-id
* preview-index
* class-name
* **Video options**
* loop
* autoplay
* muted
* effect-name
* sound-control
* is-content-overlay
### π¬ Basic video embed
Embed your short video using the `` tag. Each video is assigned a unique "video-id" attribute, which you find by logging into the Lucid Portal and selecting an individual video. Previews can also be identified by a content identifier, which are specific to each customer's content feed.
{% embed url="" %}
```javascript
```
### π¬ Embed with your own "Content ID"
If you have your own content ID, and have them stored in our database, you can also use your own content ID as a content identifier in the embed code.
{% embed url="" %}
```javascript
```
### 1οΈβ£ Video with custom preview index
Setting the index allows you to specify a specific preview among the multiple preview options generated.
{% embed url="" %}
```javascript
```
```javascript
```
### βΎοΈ Video with infinite loop
Once the video has completed playing, it will automatically loop, or re-start playing.
{% embed url="" %}
```javascript
```
### β¨ Video with effect (zoom in when hovering)
When a user mouses over your video, it will grow in size slightly and begin playing.
{% embed url="" %}
```javascript
```
### π¦ Video with content
Allows you to add content within the \ tag that is displayed during mouseover events.
{% embed url="" %}
```javascript
Look at me!
```
### π² Video with content overlay
With content-overlay, the content defined within the \ tag to be visible at all times.
{% embed url="" %}
```javascript
Look at me!
```
### Replace image under anchor link by Video
Otherwise, you can replace the internal image with the video provided by Lucid by placing an image inside the anchor link and adding data-client-content-id to the link.
```javascript
// The code above is equivalent to the output below
```
### Combine the preview with your video poster image
If you don't wish the poster image to be replaced, you can add the \ with the attribute "remain-sibling" underneath the poster's \![]()
with the corresponding video ID. Our SDK will automatically detects your poster image and combines it with our preview.
```javascript
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://lucid-ai.gitbook.io/devdocs/products/video-personalization/playback-integration/html5-integration.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
