Getting Started with FacePop SDK

Welcome to the FacePop SDK documentation. FacePop is an interactive video widget that enhances your website's video content by allowing you to add call-to-action (CTA) buttons, forms, and other interactive elements directly over your embedded videos.

What is FacePop?

FacePop transforms standard video content into interactive experiences by enabling you to add overlays with clickable elements that can:

• Direct viewers to specific landing pages
• Collect user information through embedded forms
• Display additional content without interrupting the video
• Increase engagement and conversion rates through timely calls-to-action

By using FacePop, you can make your videos more engaging and actionable, turning passive viewers into active participants.

Initializing the FacePop SDK

To start using FacePop, you need to initialize the SDK after it has been loaded. The SDK will fire an event when it's ready to be used.

// Listen for the FacePop SDK to be loaded
window.addEventListener('FacePop:Loaded', function() {
  // SDK is now ready to use
  console.log('FacePop SDK is loaded and ready to use');
  
  // You can now call FacePop functions
  // Example: Play the video
  Answerly.FacePop.play();
});

Once the SDK is loaded, you can access all the FacePop functions through the global Answerly.FacePop namespace.

Basic Usage Examples

Controlling Video Playback

// Play the video
Answerly.FacePop.play();

// Pause the video
Answerly.FacePop.pause();

// Mute the video
Answerly.FacePop.mute();

// Unmute the video
Answerly.FacePop.unmute();

Managing the Player UI

// Show the player
Answerly.FacePop.showPlayer();

// Hide the player
Answerly.FacePop.hidePlayer();

// Show the toggle button
Answerly.FacePop.showToggle();

// Hide the toggle button
Answerly.FacePop.hideToggle();

Advanced Functions

// Reset the video to the beginning
Answerly.FacePop.resetVideo();

// Completely remove the FacePop player from the DOM
Answerly.FacePop.destroy();

Listening to Events

FacePop emits various events that you can listen to in order to respond to player state changes:

// Listen for when the video starts playing
window.addEventListener('FacePop:Play', function() {
  console.log('Video started playing');
});

// Listen for when the video is paused
window.addEventListener('FacePop:Pause', function() {
  console.log('Video was paused');
});

// Listen for when a CTA is clicked
window.addEventListener('FacePop:CTAClick', function(event) {
  console.log('CTA was clicked', event.detail);
});