​
Overview

The Explainers component creates engaging video explanations that combine visual elements like diagrams, animations, and charts with AI narration. Perfect for complex topics that benefit from visual learning.

​
Creating an Explainers Component

import StudyfetchSDK from '@studyfetch/sdk';

const client = new StudyfetchSDK({
  apiKey: 'your-api-key',
  baseURL: 'https://studyfetchapi.com',
});

const explainerComponent = await client.v1.components.create({
  name: 'Cell Biology Explainer',
  type: 'explainers',
  config: {
    materials: ['mat-123', 'mat-456'],
    folders: ['folder-789'],
    title: 'Understanding Cell Structure and Function',
    style: 'educational',
    targetLength: 300,
    voiceType: 'nova',
    language: 'en',
    includeSubtitles: true,
    visualElements: ['diagrams', 'animations', 'images'],
    complexity: 'intermediate'
  }
});

console.log('Explainer component created:', explainerComponent._id);

​
Configuration Parameters

​
name
string
required
Name of the explainers component
​
type
string
required
Must be "explainers"
​
config
object
required
Explainers configuration object

​
Response

{
  "_id": "comp_303pqr",
  "name": "Cell Biology Explainer",
  "type": "explainers",
  "status": "processing",
  "config": {
    "materials": ["mat-123", "mat-456"],
    "folders": ["folder-789"],
    "title": "Understanding Cell Structure and Function",
    "style": "educational",
    "targetLength": 300,
    "voiceType": "nova",
    "language": "en",
    "includeSubtitles": true,
    "visualElements": ["diagrams", "animations", "images"],
    "complexity": "intermediate"
  },
  "createdAt": "2024-01-15T10:00:00Z",
  "updatedAt": "2024-01-15T10:00:00Z",
  "organizationId": "org_456def",
  "video": {
    "url": null,
    "thumbnailUrl": null,
    "duration": null
  }
}

​
Embedding This Component

Once you’ve created an Explainers component, you can embed it on your website using the embedding API.

​
Generate Embed URL

const embedResponse = await client.v1.components.generateEmbed(explainerComponent._id, {
  // User tracking
  userId: 'user-456',
  groupIds: ['class-101', 'class-102'],
  sessionId: 'session-789',
  
  // Explainer-specific features
  features: {
    enableWebSearchSources: true,
    enableImageSources: true,
    enableTranscript: true,
    enableOutline: true
  },
  
  // Dimensions
  width: '100%',
  height: '600px',
  
  // Token expiry
  expiryHours: 24
});

​
Explainer-Specific Embedding Features

​
features.enableWebSearchSources
boolean
default:"true"
Display web search sources used in the explanation
​
features.enableImageSources
boolean
default:"true"
Display sources for images and diagrams used in the video
​
features.enableTranscript
boolean
default:"true"
Display synchronized subtitles/transcript below the video player
​
features.enableOutline
boolean
default:"true"
Show video chapters and topic outline for easy navigation

​
Embed in Your HTML

<iframe 
  src="https://embed.studyfetch.com/component/comp_303pqr?token=..."
  width="100%"
  height="600px"
  frameborder="0"
  allowfullscreen
  style="border: 1px solid #e5e5e5; border-radius: 8px;">
</iframe>