{"archived":0,"globalCss":null,"mainStage":null,"name":"Campagne Lead Simple","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"10px","right":"10px"},"coverStyle":{"opacity":".6","transition":"opacity .5s linear","background-color":"black"},"iframeStyle":{},"wrapperClose":{"bottom":"-100%","transition":"bottom ease .5s"},"wrapperHidden":{"max-width":"380px","width":"80%","height":"380px","background":"white","right":"50%","transform":"translate(50%, 50%)","bottom":"-100%"},"wrapperOpen":{"transition":"all ease 0.5s","bottom":"50%"}},"htmlCloseButton":"<style>\n .perfmaker-close-cross {\n cursor: pointer;\n display: block;\n background-color: rgba(0,0,0,0) !important;\n color: #e51c23 !important;\n width: 40px;\n height: 40px;\n font-size: 16px;\n line-height: 40px;\n text-align: center;\n font-weight: 600;\n }\n @media only screen and (max-width: 600px) {\n .perfmaker-sidebar-wrapper {\n top:unset !important;\n bottom:calc(50vh - 110px)!important;\n right: 50% !important;\n transform: translateX(50%)!important;\n width:90%;\n height:220px;\n \n }\n }\n</style>\n<a class=\"perfmaker-close-cross\">\n X\n</a>\n","htmlContent":"<style>\n@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&family=Roboto:wght@300;500&display=swap');\n\n * {\n\t\tfont-family: 'Roboto', sans-serif; \n }\n .root {\n background-color: white;\n height: 100%;\n width: 100%;\n }\n \n \t.mail {\n width: 80%;\n display: flex; \n justify-content: center;\n align-items: center;\n margin-bottom:5%;\n }\n \n .logo {\n width:30%;\n margin-bottom:5%;\n }\n \n \n .pm-title {\n text-align: center;\n font-size:23px;\n color: #000;\n margin:0;\n font-weight:500;\n text-transform:uppercase;\n \tfont-family: 'Roboto Slab', serif;\n width:90%;\n\n }\n .pm-subtitle {\n font-size: 23px;\n \t\tmargin-top:0;\n margin-bottom: 3vh;\n color: #D63620;\n \tfont-weight:500;\n font-family: 'Roboto Slab', serif;\n \n }\n .description {\n \tfont-weight:300;\n text-align:center;\n width:90%;\n }\n \n\n .perfmaker-form {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n \n \n \n\n \n.perfmaker-form-field {\n border: 1px solid rgba(0,0,0,0.2);\n padding: 0.5em 2em 0.5em 2em;\n text-align: left;\n outline: none;\n\n \n}\n .pm-input::placeholder {\n font-size: calc(13px);\n color:#000;\n }\n \n input[type=text] {\n background-color:#F1F1F1;\n border:1px solid #F1F1F1;\n padding:16px;\n width:70%;\n font-weight:300;\n\n \n }\n \n .bottom-btn {\n border: 1px #D63620 solid;\n color: #fff;\n background: #D63620;\n cursor: pointer;\n transition: all ease .3s;\n font-size:12px;\n text-transform:uppercase;\n width:30%;\n \tpadding:16px;\n }\n .pm-cgu{\n \ttext-align:center;\n width:100%\n }\n .pm-conditions {\n font-size: calc(8px + 1vh);\n color: #3D3D3D;\n margin: 0;\n }\n \n .pm-border {\n position: absolute;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 10px solid #E31D16;\n }\n \n .pm-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n position: absolute;\n width: 100%;\n }\n \n .merci {\n font-weight: bold;\n font-size: calc(18px + 2vh);\n text-transform: uppercase;\n margin-bottom: 0;\n margin-top: 5vh;\n \n }\n \n .merci2 {\n font-size: calc(12px + 1.5vh);\n width: 100%;\n margin-bottom: 0;\n margin-top: 1vh;\n\n }\n \n .perfmaker-form-success {\n color: #3D3D3D;\n width: 90%;\n text-align: center;\n line-height: 8vh;\n padding-top: 26vh;\n margin-bottom: 87vh;\n}\n\n.pm-form-btn{\n border: 1px #3d3d3d solid;\n color: white;\n background: #3D3D3D;\n padding: 1.2vh 5vw;\n margin-top: 2vh;\n cursor: pointer;\n transition: all ease .3s;\n}\n.pm-form-btn:hover,\n.bottom-btn:hover {\n color: #3D3D3D;\n background: white;\n}\n .formfield-checkbox{\n \twidth: 80%;\n font-size: 3vh;\n display: flex;\n align-items: inherit;\n font-family: \"glacial indifference\";\n }\n .perfmaker-form-success {\n display:none;\n }\n label {\n font-size:10px;\n margin-left:10px;\n text-align:left;\n }\n</style>\n\n<div class=\"root\">\n <div class=\"pm-border\"></div>\n <div class=\"pm-container\">\n <img class=\"logo\" src=\"https://img.perfmaker.net/1105/1641398176_auchan-logo.png\"/>\n <h1 class=\"pm-title\">Recevez avant<br>tout le monde <br><span class=\"pm-subtitle\">les offres imbattables ! </span></h1>\n <p class=\"description\">Chaque semaine, recevez par mail \nles offres imbattables de la semaine !</p>\n \n <form class=\"perfmaker-form\" data-onsubmit-action=\"FORM\">\n <div class=\"mail\">\n <input id=\"email\"\n type=\"text\"\n name=\"email\"\n placeholder=\"Entrez votre email ici\"\n class=\"perfmaker-form-field pm-input\"\n data-type=\"email\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; left:30px;'>*Votre adresse mail n'est pas valide</span>\" />\n \n <button type=\"submit\" value=\"Submit\" class=\"bottom-btn\">\nValider </button>\n </div>\n \n <div class=\"formfield-checkbox\">\n <input\n type=\"checkbox\"\n id=\"optin\"\n name=\"optin\"\n class=\"perfmaker-form-field\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; left:30px;'>*Champs requis</span>\"\n />\n \n \n <label for=\"optin\"\n >J’accepte de recevoir les alertes d’offres hebdomadaires de la part des imbattables.</label\n >\n </div>\n \n\n </form>\n <div class=\"perfmaker-form-success succes\">\n <p class=\"merci\">MERCI !</p>\n <p class=\"merci2\">Votre inscription a bien été prise en compte.</p>\n <button class=\"perfmaker-action pm-form-btn\" data-onclick=\"CLOSE_BUTTON_CLICK\">\n Fermer\n </button>\n </div>\n </div>\n</div>","name":"Formulaire","notBlocking":null},{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"display":"none"},"coverStyle":{"display":"none","transition":"opacity 0.5s ease, visibility 0.5s ease"},"iframeStyle":{},"wrapperClose":{"height":"56px","width":"200px","bottom":"5%","right":"0px","transition":"right 0.3s linear","overflow":"hidden"},"wrapperHidden":{"right":"-100%"},"wrapperOpen":{"height":"56px","width":"190px","bottom":"5%","right":"0px","transition":"right 0.3s linear","overflow":"hidden"}},"htmlCloseButton":"<a style=\"cursor: pointer; display: block; background-color: grey !important; opacity: 0.65; color: white !important; width: 40px; height: 40px; font-size: 16px;line-height: 40px;text-align: center;\">X</a>\n","htmlContent":"<style>\n @font-face {\n font-family: 'Century Gothic';\n src: url('https://img.perfmaker.net/1031/fonts/CenturyGothic.woff2') format('woff2'),\n url('https://img.perfmaker.net/1031/fonts/CenturyGothic.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }\n\n.perfmaker-dot {\n width: 70px;\n height: 100%;\n border-radius: 50px 0 0 50px;\n background: #D0170E !important;\n cursor: pointer;\n -webkit-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\n -moz-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\n -ms-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\n animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);\n box-shadow: 0 0 0 0 #007c45;\n transition: 0.3s;\n overflow: hidden;\n display:flex;\n align-items:center;\n margin-left:120px;\n }\n \n\n @keyframes pulse {\n 100% {\n box-shadow: 0 0 0 0.8vh #007c4500;\n }\n }\n\n .perfmaker-dot img {\n display: inline-block;\n height:30px;\n padding:0px 0 0 24px;\n vertical-align:middle;\n\n }\n\n .perfmaker-dot .plus {\n color: #fff;\n display: inline-block;\n text-align: center;\n padding: 6px 0 0;\n font-size: 12.5px;\n margin:0 auto;\n font-family: 'Century Gothic', sans-serif;\n font-weight: 400 !important;\n transition: all 0.3s;\n opacity: 0;\n vertical-align:middle;\n padding:0 0 0 5px;\n white-space:nowrap;\n }\n\n .perfmaker-dot:hover {\n margin-left:0px;\n transition: all 0.3s;\n width:190px;\n }\n\n .perfmaker-dot:hover .plus {\n opacity: 1\n }\n</style>\n<div class=\"perfmaker-dot\">\n<img src=\"https://img.perfmaker.net/1031/picto-newsletter.png\" alt=\"\" />\n <p class=\"plus\">Recevez nos offres</p>\n</div>\n","name":"BubbleBox","notBlocking":false}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":true,"data":null,"nextStage":1}],[{"__typename":"ScenarioTransitions","actionType":"MOUSE_CLICK","closeBefore":false,"data":null,"nextStage":0}]]}
