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.
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.
🎬 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.
1️⃣ Video with custom preview index
Setting the index allows you to specify a specific preview among the multiple preview options generated.
♾️ Video with infinite loop
Once the video has completed playing, it will automatically loop, or re-start playing.
✨ Video with effect (zoom in when hovering)
When a user mouses over your video, it will grow in size slightly and begin playing.
📦 Video with content
Allows you to add content within the <lucid-player> tag that is displayed during mouseover events.
🔲 Video with content overlay
With content-overlay, the content defined within the <lucid-player> tag to be visible at all times.
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.
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.
Last updated
