How to use the PopupHero SDK

Show widget

show()

window.addEventListener('PopupHero:Loaded', () => {
    Answerly.PopupHero.show();
})

Hide widget

hide()

window.addEventListener('PopupHero:Loaded', () => {
    Answerly.PopupHero.hide();
})

Destroy widget

Completely removes the popup instance from your website destroy()

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

Run code when the widget is shown

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

window.addEventListener('PopupHero:Loaded', () => {
    Answerly.PopupHero.onShow = () => {
        console.log('Popup is showing!');
    };
})

Run code when the widget is hid (hidden)

You can run custom code when the widget is hid by overriding the function onHide  

window.addEventListener('PopupHero:Loaded', () => {
    Answerly.PopupHero.onHide = () => {
        console.log('Popup has been hidden!');
    };
})

Accessing HTML Elements

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

Answerly.PopupHero.elements['iframe'];          // -> The main iframe 
Answerly.PopupHero.elements['html'];            // -> HTML element inside the iframe
Answerly.PopupHero.elements['popuphero'];         // -> Main widget container
Answerly.PopupHero.elements['popuphero-body'];          // -> Secondary widget container
Answerly.PopupHero.elements['body-background'];          // -> Background image (IMG)
Answerly.PopupHero.elements['content'];           // -> Widget content
Answerly.PopupHero.elements['close-button'];        // -> Close button (SVG)