How to use the FacePop SDK

Show toggle

showToggle()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.showToggle();
})

Hide toggle

hideToggle()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.hideToggle();
})

Show player

showPlayer()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.showPlayer();
})

Hide player

hidePlayer()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.hidePlayer();
})

Play video

play()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.play();
})

Pause video

pause()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.pause();
})

Reset video

Brings the video to 0:00 and stops it resetVideo()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.resetVideo();
})

Load video

Loads a m3u8 file into the player loadVideo(m3u8Path: string)

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.loadVideo('https://path-to-your-video.m3u8');
})

Mute audio

mute()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.mute();
})

Unmute audio

unmute()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.unmute();
})

Destroy widget

Completely removes the facepop instance from your website destroy()

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.destroy();
})

Run code when the widget is maximized

You can run custom code when the widget is minimized by overriding the function onMaximize

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.onMaximize = () => {
        console.log('You have maximized facepop!');
    };
})

Run code when the widget is minimized

You can run custom code when the widget is minimized by overriding the function onMinimize  

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.onMinimize = () => {
        console.log('You have minimized facepop!');
    };
})

Run code when playing the video

You can run custom code when the user clicks the play button by overriding the functiononPlay

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.onPlay = () => {
        console.log('You have played the video!');
    };
})

Run code when pausing the video

You can run custom code when the user clicks the pause button by overriding the functiononPause

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.onPause = () => {
        console.log('You have paused the video!');
    };
})

Run code after clicking the CTA

You can run custom code when the visitor clicks the CTA by overriding the function onCTAClick

window.addEventListener('FacePop:Loaded', () => {
    Answerly.FacePop.onCTAClick = () => {
        console.log('You have clicked on the cta!');
    };
})

Accessing HTML Elements

Access the widget's elements directly without using unclear and obscure selectors:

Answerly.FacePop.elements['iframe'];          // -> The main iframe 
Answerly.FacePop.elements['html'];            // -> HTML element inside the iframe
Answerly.FacePop.elements['facepop'];         // -> Main widget container
Answerly.FacePop.elements['toggle'];          // -> Widget toggle
Answerly.FacePop.elements['player'];          // -> Widget player
Answerly.FacePop.elements['video'];           // -> Minimize button
Answerly.FacePop.elements['minimize'];        // -> Maximize button
Answerly.FacePop.elements['play'];            // -> Play button
Answerly.FacePop.elements['pause'];           // -> Pause button
Answerly.FacePop.elements['mute'];            // -> Mute button
Answerly.FacePop.elements['unmute'];          // -> Unmute button
Answerly.FacePop.elements['seeker'];          // -> Video seeker container
Answerly.FacePop.elements['seeker-bar'];      // -> Video seeker bar
Answerly.FacePop.elements['author'];          // -> Author container
Answerly.FacePop.elements['title'];           // -> Widget title
Answerly.FacePop.elements['description'];     // -> Widget description
Answerly.FacePop.elements['cta'];             // -> CTA container
Answerly.FacePop.elements['cta-a'];           // -> CTA anchor link