Bubble Guide

Format

Bubble

COMPLEXITÉ

Figma
🔥 Le code de ce scénario a été copié dans votre presse-papier
Preview
{"archived":0,"globalCss":" @font-face {\n font-family: \"GT Walsheim\";\n src: url(\"https://img.perfmaker.net/1148/1671709057_GTWalsheimPro-Light.woff2\") format(\"woff\");\n}\n ","mainStage":0,"name":"Bubble Guide ","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"0","top":"10px","width":"40px","height":"40px","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":"130px","width":"400px","bottom":"10%","right":"0px","transition":"right 0.3s linear","overflow":"hidden"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n \ttop:10px;\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: 15px;\n height: 2px;\n transition: All ease .3s;\n border-radius: 100px;\n }\n .lines:hover .line1{\n transform: rotate(0deg);\n height:2px;\n }\n .lines:hover .line2{\n transform: rotate(0deg);\n height:2px;\n }\n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n\n \t\n @media screen and (max-width:600px){\n .perfmaker-sidebar-wrapper {\n width:90% !important;\n right:0% !important;\n \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@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');\n.App {\n overflow:hidden;\n }\n .App>div {\n height:100vh;\n overflow:hidden;\n }\n.perfmaker-dot {\n\n \ttransform: translateX(66%);\n \toverflow: hidden;\n height: 100%;\n\twidth:100%;\n background: transparent !important;\n cursor: pointer;\n \n box-shadow: 0 0 0 0 #007c45;\n transition: 0.3s;\n overflow: hidden;\n display:flex;\n align-items:center;\n\n }\n \n\n .rectangledroite{\n \tbackground-color:#C12D72;\n height:70%;\n width:80%;\n display:flex;\n\tflex-direction:row;\n align-items:center;\n \n }\n .rectangledroite p{\n \tcolor:white;\n text-align:center;\n margin-left:20%;\n font-family: 'Inter', sans-serif;\n font-size:calc(15px + 3vh);\n font-weight:600;\n }\n .rectanglegauche{\n \tbackground-color:transparent;\n width:20%;\n }\n .image{\n \tposition:absolute;\n left:30px;\n height:80%;\n }\n \n .text{\n text-align:left;\n color:white;\n font-family: \"GT Walsheim\";\nwidth:70%;\n font-size:calc(16px + 1vh);\n margin-left:50px;\n font-weight:100;\n }\n button {\n background-color:transparent;\n border:1px solid #fff;\n color:#fff;\n padding:5px 10px;\n cursor:pointer;\n margin-top:6px;\n transition:all .4s;\n text-transform:uppercase;\n font-size:10px;\n }\n \n button:hover {\n background-color:#fff;\n color:#D94C45;\n border:1px solid #fff;\n }\n</style>\n<div class=\"perfmaker-dot perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"1\" id=\"pm-bubble\">\n <img class=\"image\" src=\"https://img.perfmaker.net/1159/1678700375_Rectangle%203.png\"> \n <div class=\"rectanglegauche\">\n </div>\n <div class=\"rectangledroite\">\n<p> Obtenez votre guide<br>\nAssurance vie 2023\n </p>\n </div> \n</div>\n","name":"BubbleBox","notBlocking":true},{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"0","top":"10px","width":"40px","height":"40px"},"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":"130px","width":"400px","bottom":"10%","right":"0px","transition":"right 0.3s linear","overflow":"hidden"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n \ttop:10px;\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: 15px;\n height: 2px;\n transition: All ease .3s;\n border-radius: 100px;\n }\n .lines:hover .line1{\n transform: rotate(0deg);\n height:2px;\n }\n .lines:hover .line2{\n transform: rotate(0deg);\n height:2px;\n }\n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n\n \t\n @media screen and (max-width:600px){\n .perfmaker-sidebar-wrapper {\n width:90% !important;\n right:0% !important;\n \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@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');\n\n .App {\n overflow:hidden;\n }\n .App>div {\n height:100vh;\n overflow:hidden;\n }\n \n.perfmaker-dot {\n\n \t-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n\t animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n \toverflow: hidden;\n height: 100%;\n\twidth:100%;\n background: transparent !important;\n cursor: pointer;\n \n box-shadow: 0 0 0 0 #007c45;\n transition: 0.3s;\n overflow: hidden;\n display:flex;\n align-items:center;\n\n }\n @-webkit-keyframes slide-left {\n 0% {\n -webkit-transform: translateX(66%);\n transform: translateX(66%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n@keyframes slide-left {\n 0% {\n -webkit-transform: translateX(66%);\n transform: translateX(66%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n\n .rectangledroite{\n \tbackground-color:#C12D72;\n height:70%;\n width:80%;\n display:flex;\n\tflex-direction:row;\n align-items:center;\n \n }\n .rectangledroite p{\n \tcolor:white;\n text-align:center;\n margin-left:20%;\n font-family: 'Inter', sans-serif;\n font-size:calc(15px + 3vh);\n font-weight:600;\n }\n .rectanglegauche{\n \tbackground-color:transparent;\n width:20%;\n }\n .image{\n \tposition:absolute;\n left:30px;\n height:80%;\n }\n \n .text{\n text-align:left;\n color:white;\n font-family: \"GT Walsheim\";\nwidth:70%;\n font-size:calc(16px + 1vh);\n margin-left:50px;\n font-weight:100;\n }\n button {\n background-color:transparent;\n border:1px solid #fff;\n color:#fff;\n padding:5px 10px;\n cursor:pointer;\n margin-top:6px;\n transition:all .4s;\n text-transform:uppercase;\n font-size:10px;\n }\n \n button:hover {\n background-color:#fff;\n color:#D94C45;\n border:1px solid #fff;\n }\n</style>\n<div class=\"perfmaker-dot perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"https://placement.sicavonline.fr/assurance-vie/guide-assurance-vie/\" id=\"pm-bubble\">\n <img class=\"image\" src=\"https://img.perfmaker.net/1159/1678700375_Rectangle%203.png\"> \n <div class=\"rectanglegauche\">\n </div>\n <div class=\"rectangledroite\">\n<p> Obtenez votre guide<br>\nAssurance vie 2023\n </p>\n </div> \n</div>\n","name":"BubbleBox","notBlocking":true},{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"0","top":"10px","width":"40px","height":"40px","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":"130px","width":"400px","bottom":"10%","right":"0px","transition":"right 0.3s linear","overflow":"hidden"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n \ttop:10px;\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: 15px;\n height: 2px;\n transition: All ease .3s;\n border-radius: 100px;\n }\n .lines:hover .line1{\n transform: rotate(0deg);\n height:2px;\n }\n .lines:hover .line2{\n transform: rotate(0deg);\n height:2px;\n }\n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n\n \t\n @media screen and (max-width:600px){\n .perfmaker-sidebar-wrapper {\n width:90% !important;\n right:0% !important;\n \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@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');\n\n .App {\n overflow:hidden;\n }\n .App>div {\n height:100vh;\n overflow:hidden;\n }\n.perfmaker-dot {\n\n \t-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n\t animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n \toverflow: hidden;\n height: 100%;\n\twidth:100%;\n background: transparent !important;\n cursor: pointer;\n \n box-shadow: 0 0 0 0 #007c45;\n transition: 0.3s;\n overflow: hidden;\n display:flex;\n align-items:center;\n\n }\n @-webkit-keyframes slide-left {\n 0% {\n -webkit-transform: translateX(0%);\n transform: translateX(0%);\n }\n 100% {\n -webkit-transform: translateX(66%);\n transform: translateX(66%);\n }\n}\n@keyframes slide-left {\n 0% {\n -webkit-transform: translateX(0%);\n transform: translateX(0%);\n }\n 100% {\n -webkit-transform: translateX(66%);\n transform: translateX(66%);\n }\n}\n\n .rectangledroite{\n \tbackground-color:#C12D72;\n height:70%;\n width:80%;\n display:flex;\n\tflex-direction:row;\n align-items:center;\n \n }\n .rectangledroite p{\n \tcolor:white;\n text-align:center;\n margin-left:20%;\n font-family: 'Inter', sans-serif;\n font-size:calc(15px + 3vh);\n font-weight:600;\n }\n .rectanglegauche{\n \tbackground-color:transparent;\n width:20%;\n }\n .image{\n \tposition:absolute;\n left:30px;\n height:80%;\n }\n \n .text{\n text-align:left;\n color:white;\n font-family: \"GT Walsheim\";\nwidth:70%;\n font-size:calc(16px + 1vh);\n margin-left:50px;\n font-weight:100;\n }\n button {\n background-color:transparent;\n border:1px solid #fff;\n color:#fff;\n padding:5px 10px;\n cursor:pointer;\n margin-top:6px;\n transition:all .4s;\n text-transform:uppercase;\n font-size:10px;\n }\n \n button:hover {\n background-color:#fff;\n color:#D94C45;\n border:1px solid #fff;\n }\n</style>\n<div class=\"perfmaker-dot perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"1\" id=\"pm-bubble\">\n <img class=\"image\" src=\"https://img.perfmaker.net/1159/1678700375_Rectangle%203.png\"> \n <div class=\"rectanglegauche\">\n </div>\n <div class=\"rectangledroite\">\n<p> Obtenez votre guide<br>\nAssurance vie 2023\n </p>\n </div> \n</div>\n","name":"BubbleBox","notBlocking":true}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":1}],[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":false,"data":null,"nextStage":2}],[{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":1}]]}