{ "archived":0, "name":"debug form cta", "stages":[ { "__typename":"ScenarioStages", "customScript":"", "formatContainer":{ "__typename":"ScenarioStagesFormatContainer", "closeButtonStyle":{ "position":"absolute", "top":"8px", "right":"8px", "min-width":"0", "min-height":"0" }, "coverStyle":{ "display":"none", "transition":"opacity 0.5s ease, visibility 0.5s ease" }, "iframeStyle":{ }, "wrapperClose":{ "transition":"all 1s" }, "wrapperHidden":{ "height":"240px", "width":"260px", "right":"-260px", "box-shadow":"10px 5px 5px green;" }, "wrapperOpen":{ "right":"10px", "bottom":"40px", "transition":"all 0.5s linear", "transition-timing-function":"cubic-bezier(.17,.52,.24,.99)" } }, "htmlCloseButton":"<style>\n \t.perfmaker-close-button {\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: 0;\n min-height: 0;\n height: 20px;\n width: 20px;\n margin:0;\n padding:0;\n box-sizing:border-box;\n color:#fff;\n }\n \n @media only screen and (max-width: 640px) {\n .perfmaker-sidebar-wrapper {\n width: 80vw !important;\n height: 50% !important;\n left: 50% !important;\n \tbottom:50% !important;\n transform:translate(-50%, 50%);\n }\n \n }\n</style>\n\n<a class=\"perfmaker-close-button\">X\n</a> \n\n\n", "htmlContent":"<style>\n@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap');\n \n .template-App *{font-family: 'Oxygen', sans-serif;}\n \n .template-App {\n background-color: #fff;\n height: 100%;\n border-radius: 10px; \n color: white;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n flex-direction: column;\n text-align: left;\n text-transform: uppercase;\n font-family: 'Titillium Web', sans-serif;\n color: white;\n box-sizing:border-box;\n background-image:url(\"https://img.perfmaker.net/1008/1637335871_bg-cuisibane.png\");\n background-size:cover;\n background-position:bottom;\n position:relative;\n \n }\n \n .template-App .bubble-text {\n font-weight:700;\n text-align:right;\n }\n \n .template-App h1 {\n margin:0;\n color:#fff;\n font-weight:700;\n font-size: 30px;\n text-align:left;\n \tline-height:50px;\n \n }\n \n .template-App p {\n font-size: 26px;\n padding-left:5%;\n margin:0;\n color:#fff;\n }\n \n .template-App button {\n font-size: 16px;\n color:#fff;\n\tbackground-color:transparent;\n border:2px solid #fff;\n border-radius:3px;\n margin:10px auto 0 ;\n padding:5px 20px;\n transition:0.3s;\n cursor:pointer;\n width:90%;\n text-transform:uppercase;\n }\n \n .template-App button:hover {\n background-color:#fff;\n color:#000\n }\n \n @media all and (max-width:640px) {\n .template-App h1 {\n font-size: calc(50px + 3vh);\n line-height: calc(60px + 3vh);\n }\n }\n \n</style>\n\n\n<div class=\"template-App\">\n <h1>RANDOM SURVEY</h1>\n <p class=\"bubble-text\">We need your data</p>\n</div>\n\n\n", "name":"bubble", "notBlocking":true }, { "__typename":"ScenarioStages", "customScript":"", "formatContainer":{ "__typename":"ScenarioStagesFormatContainer", "closeButtonStyle":{ "position":"absolute", "top":"0", "right":"0" }, "coverStyle":{ "opacity":".6", "transition":"opacity .5s linear", "background-color":"black" }, "iframeStyle":{ }, "wrapperClose":{ "transition":"right .3s linear", "right":"-400px" }, "wrapperHidden":{ "width":"380px", "height":"100vh", "right":"-400px", "top":"0vh", "background":"ghostwhite" }, "wrapperOpen":{ "transition":"right .3s linear", "right":"0vw" } }, "htmlCloseButton":"<style>\n .perfmaker-close-cross {\n cursor: pointer;\n display: block;\n background-color: rgba(0,0,0,0) !important;\n color: #D1452B !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 \n }\n</style>\n<a class=\"perfmaker-close-cross\">\n X\n</a>", "htmlContent":"<style>\n @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');\n @import url(https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i);\n @import url(https://fonts.googleapis.com/css?family=Roboto);\n\n .App {\n text-align: inherit;\n }\n\n .template-App-header {\n height: 10vh;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 0 0 2vh #D7D7D7;\n margin: 0;\n }\n\n .template-App-header img {\n width: 60%;\n }\n\n .template-App-subheader {\n display: flex;\n align-items: center;\n flex-direction: column;\n font-family: 'Oxygen';\n width: 100%;\n height: calc(90vh - calc(10px + 5vh));\n margin-top: calc(10px + 3vh);\n }\n\n .template-App-subheader h1 {\n text-align: center;\n text-transform: uppercase;\n font-size: calc(10px + 2vh);\n font-weight: 700;\n margin: 0;\n margin-bottom: calc(3px + .5vh);\n }\n\n .template-App-subheader h4 {\n text-align: center;\n text-transform: uppercase;\n font-size: calc(5px + 1vh);\n }\n\n .template-App-subheader hr {\n text-align: center;\n width: 60%;\n height: 2px;\n border: none;\n background-color: #e43e24;\n }\n\n .template-App-subheader form {\n display: flex;\n flex-direction: column;\n width: 90%;\n font-size: calc(10px + 0.8vh);\n position: relative;\n }\n\n .template-App-subheader form input {\n margin: calc(2px + .3vh);\n }\n\n .template-App-subheader form label {\n display: flex;\n flex-direction: row;\n margin: calc(1px + 0.3vh);\n }\n\n .template-App-subheader form label:hover {\n background-color: whitesmoke;\n }\n\n .template-App-subheader button {\n display: block;\n position: relative;\n padding: 8px 4px;\n margin: 3vh auto 0;\n width: 80%;\n height: calc(20px + 2vh);\n border: 2px solid #AE5656;\n background-color: #e43e24;\n color: white;\n cursor: pointer;\n text-transform: uppercase;\n font-size: calc(8px + 1vh);\n }\n\n .template-App-subheader button:hover {\n border-color: #ffce26;\n transition: .08s;\n }\n\n .template-App-subheader button+p {\n font-size: 0.8em;\n text-align: center;\n }\n</style>\n\n<div id=\"template-root\">\n <div class=\"template-App\">\n <div class=\"template-App-header\">\n <img\n src=\"https://img.perfmaker.net/1008/Logo/cuisibane-logo-1618230568.jpeg\"\n alt=\"\"\n />\n </div>\n <div class=\"template-App-subheader\">\n <form class=\"perfmaker-form\" data-onsubmit-action=\"FORM\">\n <h1>Vous nous quittez <br />déjà ?</h1>\n <hr />\n <h4 style=\"text-align: center;\">\n Afin de mieux vous satisfaire, expliquez nous la raison de votre\n départ:\n </h4>\n <label class=\"container\">\n <input\n type=\"checkbox\"\n id=\"pas_assez_de_choix\"\n name=\"pas_assez_de_choix\"\n class=\"perfmaker-form-field\"\n />\n <span class=\"checkmark\"></span>\n Pas assez de choix\n </label>\n <label class=\"container\">\n <input\n type=\"checkbox\"\n id=\"plus_de_photo\"\n name=\"plus_de_photo\"\n class=\"perfmaker-form-field\"\n />\n <span class=\"checkmark\"></span>\n Il faudrait plus de photos des produits\n </label>\n <label class=\"container\">\n <input\n type=\"checkbox\"\n id=\"informations_techniques\"\n name=\"informations_techniques\"\n class=\"perfmaker-form-field\"\n />\n <span class=\"checkmark\"></span>\n Il manque des informations sur les produits\n </label>\n <label class=\"container\">\n <input\n type=\"checkbox\"\n id=\"ergonomie\"\n name=\"ergonomie\"\n class=\"perfmaker-form-field\"\n />\n <span class=\"checkmark\"></span>\n Le site manque d'ergonomie\n </label>\n <button class=\"perfmaker-action\" type=\"submit\" value=\"Submit\">\n Envoyer\n </button>\n <p>Sondage anonyme dans le but d'améliorer nos services</p>\n </form>\n <div class=\"perfmaker-form-success succes\">\n <p style=\"text-align:center;\">\n Merci pour votre réponse, nous prenons l'avis de nos clients très à\n coeur.\n </p>\n <button\n class=\"perfmaker-action\"\n data-onclick=\"HIDE_SIDEBAR\"\n data-url=\"\"\n >\n Retour\n </button>\n </div>\n </div>\n </div>\n</div>\n", "name":"form", "notBlocking":false } ], "transitions":[ [ { "__typename":"ScenarioTransitions", "actionType":"MOUSE_CLICK", "closeBefore":false, "data":null, "nextStage":1 } ], [ { "__typename":"ScenarioTransitions", "actionType":null, "closeBefore":false, "data":null, "nextStage":null } ] ] }
