Answerly Docs logo
Found 0 Answers

How to use the PopupHero SDK

author picture

Fatos Bediu

Founder & Developer answerly.io

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)



Did we answer your question?

😃 🤔 ☹️

How can we improve this answer?