How to use the PopupHero SDK

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?