Contact Us

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 <body> 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.

<script id="LucidPlayer" src="https://sdk.lucidinside.com/lucid-player.min.js?token=your-token"></script>// 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 <lucid-player> 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.

<lucid-playervideo-id="lucidPreviewID"></lucid-player>

🎬 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.

<lucid-playerclient-content-id="YourVideoContentID"></lucid-player>

1️⃣ Video with custom preview index

Setting the index allows you to specify a specific preview among the multiple preview options generated.

<lucid-player video-id="lucidPreviewID" preview-index="1"></lucid-player>
<lucid-player video-id="lucidPreviewID" preview-index="3"></lucid-player>

♾️ Video with infinite loop

Once the video has completed playing, it will automatically loop, or re-start playing.

<lucid-player video-id="lucidPreviewID" loop></lucid-player>

✨ Video with effect (zoom in when hovering)

When a user mouses over your video, it will grow in size slightly and begin playing.

<lucid-player
    video-id="lucidPreviewID"
    effect-name="zoom-in-when-hover"
>
</lucid-player>

📦 Video with content

Allows you to add content within the <lucid-player> tag that is displayed during mouseover events.

<lucid-player
    video-id="lucidPreviewID"
    effect-name="zoom-in-when-hover"
    sound-control
>
    <div class="flex w-full h-full">
        <span class="inline-block m-auto text-white text-2xl">
            Look at me!
        </span>
    </div>
</lucid-player>

🔲 Video with content overlay

With content-overlay, the content defined within the <lucid-player> tag to be visible at all times.

<lucid-player
    video-id="lucidPreviewID"
    effect-name="zoom-in-when-hover"
    sound-control
    content-overlay
>
    <div class="flex w-full h-full">
        <span class="inline-block m-auto text-white text-2xl">
            Look at me!
        </span>
    </div>
</lucid-player>

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.

<a
    href='https://videostream.com/1234s'
    data-client-content-id="YourVideoContentID"
>
    <img src="https://s3.amazonaws.com/pbblogassets/uploads/2014/11/oblivion-poster.jpg" />
</a>

// The code above is equivalent to the output below
<a
    href='https://videostream.com/1234s'
    data-client-content-id="YourVideoContentID"
>
    <lucid-player client-content-id="YourVideoContentID">
</a>

Combine the preview with your video poster image

If you don't wish the poster image to be replaced, you can add the <lucid-player> with the attribute "remain-sibling" underneath the poster's <img> with the corresponding video ID. Our SDK will automatically detects your poster image and combines it with our preview.

<a href='https://videostream.com/1234s'>
    <div class="container">
        <div style="position: relative;">
            <img src="https://image.jpg?width=722&amp;height=406&amp;quality=90&amp;jpg=true" alt="World of the Wild" class="img-responsive" />
            <lucid-player data-client-content-id="E7881" remain-sibling preview-index="0"></lucid-player>
        </div>
    </div>
</a>
PreviousPlayback IntegrationNextAndroid/Fire TV Integration

Last updated