templates/utils/help-coach.html.twig line 1

Open in your IDE?
  1. <div id="help-coach">
  2. <div class="cursor-pointer step-0">
  3. <div class="d-flex justify-content-center align-items-center gap-3 mobile-display-none" style="padding-right: 70px;">
  4. <div class="text-white">
  5. Un <b>coaching <br/>gratuit</b>
  6. avec Sacha ?
  7. </div>
  8. <div class="position-absolute" style="right: -10px; bottom: -5px;">
  9. <img src="{{ asset('assets/media/sacha-reverse.png') }}" style="max-width: 100px; max-height: 150px; object-fit: contain;" />
  10. </div>
  11. </div>
  12. <div class="mobile-display-block">
  13. <div class="d-flex justify-content-end align-items-center gap-3">
  14. <div class="text-white" id="help-coach-mobile-text-animation">
  15. Parler<br/>
  16. avec <b>Sacha</b> ?
  17. </div>
  18. <div>
  19. <img src="{{ asset('assets/media/sacha-croped.png') }}" style="max-width: 40px; max-height: 40px; object-fit: contain; transform: rotateY(3.142rad);" />
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  25. <div class="step step-1 shadow-xs bg-white border-radius10">
  26. <div class="text-primary fw-bolder text-center" style="font-size: 16px; line-height: 22px;">Bienvenue dans l'espace de coaching ZenDez-Vous</div>
  27. <div class="mt-7">
  28. <div>
  29. <button class="d-flex justify-content-between align-items-center talk-to-sacha" style="padding: 15px;">
  30. <div><img src="{{ asset('assets/media/sacha.png') }}" style="max-width: 60px; max-height: 70px; object-fit: contain;" /></div>
  31. <div>Parler avec Sacha, c'est gratuit. Allons-y !</div>
  32. </button>
  33. </div>
  34. <div class="mt-5">
  35. <a href="{{ path('default_conseils') }}"><button style="padding: 15px;">Prendre rendez-vous avec un coach professionnel</button></a>
  36. </div>
  37. </div>
  38. </div>
  40. <div class="close close1" style="display: none;">
  41. <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 384 512"><path fill="#FFFFFF" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
  42. </div>
  44. <div class="expand expand2 tablet-display-none" style="display: none;">
  45. <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 512 512"><path fill="#FFFFFF" d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/></svg>
  46. </div>
  48. <div class="close close2" style="display: none;">
  49. <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 384 512"><path fill="#FFFFFF" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
  50. </div>
  52. <div class="step step-3 shadow-xs bg-white border-radius10">
  53. <div class="text-primary fw-bolder text-center" style="font-size: 16px; line-height: 22px;">Vous préférez parler à un humain ?</div>
  54. <div class="mt-7">
  55. <div class="mt-5">
  56. <a href="{{ path('default_conseils') }}" target="_blank"><button style="padding: 15px;">Prendre rendez-vous avec un coach professionnel</button></a>
  57. </div>
  58. </div>
  59. <div class="mt-3">
  60. <div class="text-center text-decoration-underline cursor-pointer close3">Non merci</div>
  61. </div>
  62. </div>
  63. </div>
  65. <script>
  66. (function() {
  67. var step0 = document.querySelector("#help-coach .step-0");
  68. var step1 = document.querySelector("#help-coach .step-1");
  69. var close1 = document.querySelector("#help-coach .close1");
  70. var talkToSachaBtn = document.querySelector("#help-coach .step-1 .talk-to-sacha");
  71. var close2 = document.querySelector("#help-coach .close2");
  72. var expand2 = document.querySelector("#help-coach .expand2");
  73. var step3 = document.querySelector("#help-coach .step-3");
  74. var close3= document.querySelector("#help-coach .close3");
  76. step0.addEventListener("click", (event) => {
  77. step0.style.display = "none";
  78. step1.style.maxWidth = "300px";
  79. step1.style.maxHeight = "initial";
  80. step1.style.padding = "25px";
  81. close1.style.display = "block";
  82. });
  84. talkToSachaBtn.addEventListener("click", (event) => {
  85. step1.style.maxWidth = "0";
  86. step1.style.maxHeight = "0";
  87. step1.style.padding = "0";
  88. close1.style.display = "none";
  89. close2.style.display = "block";
  90. expand2.style.display = "block";
  91. openTalkToSacha();
  92. });
  94. close1.addEventListener("click", (event) => {
  95. step0.style.display = "block";
  96. step1.style.maxWidth = "0";
  97. step1.style.maxHeight = "0";
  98. step1.style.padding = "0";
  99. close1.style.display = "none";
  100. });
  102. close2.addEventListener("click", (event) => {
  103. document.querySelector("#botmanWidgetRoot > div").insertAdjacentHTML('beforeend', '<div id="close-sacha">Étes-vous sûr de vouloir arrêter la conversation avec Sacha ?<div class="buttons"><a id="close-sacha-yes" href="#">Oui</a><a id="close-sacha-no" href="#">Non</a></div></div>');
  104. close2.style.display = "none";
  106. document.getElementById("close-sacha-yes").addEventListener("click", (event) => {
  107. document.getElementById("close-sacha").remove();
  108. step3.style.maxWidth = "300px";
  109. step3.style.maxHeight = "initial";
  110. step3.style.padding = "25px";
  111. expand2.style.display = "none";
  112. closeTalkToSacha();
  113. });
  115. document.getElementById("close-sacha-no").addEventListener("click", (event) => {
  116. document.getElementById("close-sacha").remove();
  117. close2.style.display = "block";
  118. });
  119. });
  121. expand2.addEventListener("click", (event) => {
  122. var botDivEl = document.querySelector("#botmanWidgetRoot > div");
  123. if (expand2.classList.contains('active')) {
  124. botDivEl.style.height = "initial";
  125. botDivEl.style.width = "370px";
  126. botDivEl.childNodes[1].style.height = "450px";
  127. } else {
  128. botDivEl.style.height = "650px";
  129. botDivEl.style.width = "600px";
  130. botDivEl.style.maxWidth = "100%";
  131. botDivEl.childNodes[1].style.height = "600px";
  132. }
  133. expand2.classList.toggle('active');
  134. });
  136. close3.addEventListener("click", (event) => {
  137. step0.style.display = "block";
  138. step3.style.maxWidth = "0";
  139. step3.style.maxHeight = "0";
  140. step3.style.padding = "0";
  141. });
  142. })();
  143. </script>
  144. <script>
  145. var botmanWidget = {
  146. frameEndpoint: '{{ path("chat_frame") }}',
  147. chatServer: '{{ path("chat_message") }}?userId={{ random()~random() }}',
  148. introMessage: "Bonjour, je suis Sacha, en quoi puis-je vous aider ?",
  149. title: 'Parler avec Sacha',
  150. mobileWidth: "100%",
  151. headerTextColor: '#fff',
  152. mainColor: '#336c7a',
  153. color: '#ffffff',
  154. bubbleBackground: '#FFFFFF',
  155. aboutLink: '#',
  156. aboutText: '',
  157. placeholderText: 'Répondre ...',
  158. displayMessageTime: true
  159. };
  161. function openTalkToSacha() {
  162. botmanChatWidget.open();
  163. }
  165. function closeTalkToSacha() {
  166. botmanChatWidget.close();
  167. }
  168. </script>
  169. <script src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/widget.js'></script>
  170. <script>
  171. // Prevent header on click closing
  172. (function() {
  173. function removeOnClick(element) {
  174. function onClickFunction(event) {
  175. event.preventDefault();
  176. event.stopPropagation();
  177. return false;
  178. }
  180. element.addEventListener('click', onClickFunction, true);
  181. }
  183. // Fonction à exécuter lors de l'observation des mutations
  184. function observerCallback(mutationsList, observer) {
  185. // Parcourir les mutations
  186. for(let mutation of mutationsList) {
  187. if (mutation.type === 'childList' && mutation.addedNodes && mutation.addedNodes[0].id === 'botmanWidgetRoot') {
  188. const botmanWidgetRootDiv = document.querySelector('#botmanWidgetRoot > div');
  190. const config2 = { childList: true };
  191. const observer2 = new MutationObserver(observerCallback2);
  192. observer2.observe(botmanWidgetRootDiv, config2);
  193. }
  194. }
  195. }
  196. function observerCallback2(mutationsList, observer) {
  197. // Parcourir les mutations
  198. for(let mutation of mutationsList) {
  199. if (mutation.target) {
  200. const targettedDiv = mutation.target.querySelector('div');
  201. if (targettedDiv) {
  202. removeOnClick(targettedDiv);
  203. }
  204. }
  205. }
  206. }
  208. // Sélectionner l'élément à observer
  209. const targetNode = document.body;
  210. const config = { childList: true };
  211. const observer = new MutationObserver(observerCallback);
  212. observer.observe(targetNode, config);
  213. })();
  214. </script>
  215. <script>
  216. // Hide text on mobile
  217. (function() {
  218. setTimeout(function(){
  219. document.getElementById('help-coach-mobile-text-animation').style.maxWidth = '0';
  220. }, 3000);
  221. })();
  222. </script>
  223. <style>
  224. #botmanWidgetRoot .desktop-closed-message-avatar {
  225. display: none !important;
  226. }
  228. #botmanWidgetRoot div {
  229. cursor: default !important;
  230. font-weight: 500 !important;
  231. font-family: "Montserrat", sans-serif !important;
  232. z-index: 99999 !important;
  233. }
  235. #botmanWidgetRoot svg {
  236. display: none !important;
  237. }
  239. #help-coach-mobile-text-animation {
  240. width: 100%;
  241. max-width: 100%;
  242. overflow: hidden;
  243. white-space: nowrap;
  244. transition: max-width 0.3s linear;
  245. }
  247. #botmanWidgetRoot #close-sacha {
  248. position: absolute;
  249. top: 0;
  250. left: 0;
  251. background-color: #e9e9e994;
  252. backdrop-filter: blur(10px);
  253. -webkit-backdrop-filter: blur(10px);
  254. height: 100%;
  255. width: 100%;
  256. display: flex;
  257. flex-direction: column;
  258. align-items: center;
  259. justify-content: center;
  260. font-size: 16px;
  261. text-align: center;
  262. padding: 30px;
  263. }
  265. #botmanWidgetRoot #close-sacha .buttons {
  266. margin-top: 15px;
  267. }
  269. #botmanWidgetRoot #close-sacha .buttons a {
  270. display: inline-block;
  271. margin-left: 20px;
  272. margin-right: 20px;
  273. }
  274. </style>