BalancePro - réassurance

Format

Sidebox

COMPLEXITÉ

Low
Figma
🔥 Le code de ce scénario a été copié dans votre presse-papier
Preview
{"archived":0,"globalCss":null,"mainStage":0,"name":"Réassurance","stages":[{"__typename":"ScenarioStages","customScript":null,"displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"10px","right":"10px"},"coverStyle":{"background-color":"black","opacity":"0.6","transition":"opacity .5s"},"iframeStyle":{},"wrapperClose":{"bottom":"-100%","transition":"bottom ease .5s"},"wrapperHidden":{"height":"500px","width":"400px","right":"50%","top":"-100%","transform":"translate(50%, -50%)","overflow":"hidden !important"},"wrapperOpen":{"top":"50%","transition":"bottom ease .5s"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n top: 0vh;\n right: 0px;\n width: 40px;\n height: 40px;\n cursor: pointer;\n background-color:transparent;\n border-radius: 100px;\n }\n .line{\n position: absolute;\n background-color:white;\n width: 20px;\n height: 2px;\n transition: All ease .3s;\n border-radius: 100px;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n \n @media only screen and (max-width: 670px) {\n \t.perfmaker-sidebar-wrapper {\n height: 80% !important;\n width: 80% !important;\n margin-left: 10% !important;\n \t}\n } \n \n \n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n @font-face {\n font-family: \"Futura\";\n src: url(\"https://img.perfmaker.net/812/1642690439_Futura.woff2\")\n }\n @font-face {\n font-family: \"Futura Bold\";\n src: url(\"https://img.perfmaker.net/812/1645725017_FuturaStdHeavy.otf\")\n}\n.pm-root{\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: #032944;\n border-radius: 10px;\n}\n .pm-logo{\n \tbackground-image:url(\"https://img.perfmaker.net/1140/1667486661_logo.svg\");\n background-size:contain;\n background-position:center;\n background-repeat:no-repeat;\n width:80%;\n height:7vh;\n margin: 3.5vh 0;\n }\n.pm-title{\n width: 65%;\n color: white;\n font-family: \"Futura\";\n font-style: italic;\n font-size: calc(10px + 1.5vh);\n text-align: center;\n}\n.pm-content{\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 60%;\n}\n.pm-list{\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content:flex-start;\n font-family: \"Futura\";\n font-size: calc(10px + 1.5vh);\n color: white;\n text-align: left;\n margin: 3vh 0;\n}\n.pm-icon{\n height: 30px;\n width: 30px;\n padding:0vh 3vw;\n}\n\n.bottom-btn{\n cursor: pointer;\n width: 60%;\n padding: 2vh 0;\n margin-top:2vh;\n background-color: #ADD0F2;\n color: white;\n text-transform: uppercase;\n border: none;\n font-family: \"Futura Bold\";\n}\n.bottom-btn2{\n cursor: pointer;\n width: 60%;\n padding: 2vh 0;\n background-color: white;\n color: black;\n text-transform: uppercase;\n border: none;\n font-family: \"Futura Bold\";\n margin-top:3vh;\n}\n\n\n</style>\n\n<div class=\"pm-root\">\n <div class=\"pm-logo\"></div>\n <div class=\"pm-title\">Le plus grand choix de balances toutes marques</div>\n <div class=\"pm-content\">\n <p class=\"pm-list\"><img src=\"https://img.perfmaker.net/1140/1667487297_icon1.svg\" class=\"pm-icon pm-icon1\">Leader français du pesage pour professionnels </p>\n <p class=\"pm-list\"><img src=\"https://img.perfmaker.net/1141/1667399393_icon2.svg\" class=\"pm-icon pm-icon2\">Livraison Rapide</p>\n <p class=\"pm-list\"><img src=\"https://img.perfmaker.net/1141/1667399393_icon3.svg\" class=\"pm-icon pm-icon3\">Paiement sécurisé</p>\n <p class=\"pm-list\"><img src=\"https://img.perfmaker.net/1141/1667399393_icon4.svg\" class=\"pm-icon pm-icon4\">3X sans frais</p>\n </div>\n <button class=\"perfmaker-action bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"https://www.balance-professionnelle.fr/contactez-nous\">Contactez-nous</button>\n <button class=\"perfmaker-action bottom-btn2\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"\">Continuez votre visite</button>\n\n</div>\n","name":"","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}