function defineMessageToDisplay (points) { let type = ''; if (points >= 0 && points < 10) { type = 'type_1'; } else if (points >= 10 && points < 20) { type = 'type_2'; } else if (points >= 20 && points < 30) { type = 'type_3'; } else if (points >= 30 && points < 40) { type = 'type_4'; } else if (points >= 40 && points < 50) { type = 'type_5'; } else if (points >= 50 && points < 60) { type = 'type_6'; } else if (points >= 60 && points < 70) { type = 'type_7'; } else if (points >= 70 && points < 80) { type = 'type_8'; } else if (points >= 80 && points < 90) { type = 'type_9'; } else if (points >= 90 && points < 100) { type = 'type_10'; } else if (points >= 100) { type = 'type_11'; } return type; } function createOperatorMessage ( title, description, ctaText, ctaLink, ctaStyle, imgUrl, vidUrl, avatarImageUrl, classView, classRow, classAvatar, classMessage, classBubble, classStateToHtml, classMediaList, classMediaItem, classMediaImage, ) { const messageView = document.createElement('div'); messageView.setAttribute('data-from', 'bot'); messageView.setAttribute('id', 'bot-game-points'); messageView.setAttribute('class', `fastory-Message-view-${classView}`); const messageRow = document.createElement('div'); messageRow.setAttribute('class', `fastory-Message-row-${classRow}`); messageView.appendChild(messageRow); const messageAvatar = document.createElement('div'); messageAvatar.setAttribute('class', `fastory-Message-avatar-${classAvatar}`); const avatarImage = document.createElement('img'); avatarImage.setAttribute('src', avatarImageUrl || 'https://res.cloudinary.com/detvpnlny/image/upload/default_avatar.png'); messageAvatar.appendChild(avatarImage); const messageMessage = document.createElement('div'); messageMessage.setAttribute( 'class', `fastory-Message-message-${classMessage}`, ); messageRow.appendChild(messageAvatar); messageRow.appendChild(messageMessage); const messageBubble = document.createElement('div'); messageBubble.setAttribute('class', `fastory-Message-bubble-${classBubble}`); messageBubble.setAttribute('data-with-animation', 'true'); messageMessage.appendChild(messageBubble); const mediaListView = document.createElement('div'); mediaListView.setAttribute( 'class', `fastory-MediaList-view-${classMediaList}`, ); const mediaListItem = document.createElement('div'); mediaListItem.setAttribute( 'class', `fastory-MediaList-item-${classMediaItem}`, ); if (imgUrl) { const mediaImage = document.createElement('img'); mediaImage.setAttribute('class', `fastory-Media-view-${classMediaImage}`); mediaImage.src = imgUrl; mediaImage.setAttribute( 'style', 'background-image: url(""); background-size: cover; background-repeat: no-repeat; background-position: center center;', ); mediaListItem.appendChild(mediaImage); } if (vidUrl) { const mediaVideoTest = document.createElement('video'); mediaVideoTest.setAttribute('loop', 'true'); mediaVideoTest.setAttribute('autoplay', 'true'); mediaVideoTest.setAttribute( 'class', `fastory-Media-view-${classMediaImage}`, ); mediaVideoTest.src = 'https://res.cloudinary.com/detvpnlny/video/upload/c_fill,h_444,w_250/wsorrp4rzudvmibx4epx'; mediaVideoTest.setAttribute( 'style', 'background-image: url(""); background-size: cover; background-repeat: no-repeat; background-position: center center;', ); mediaListItem.appendChild(mediaVideoTest); } mediaListView.appendChild(mediaListItem); const messageStateToHtml = document.createElement('div'); messageStateToHtml.setAttribute( 'class', `fastory-Message-stateToHtml-${classStateToHtml}`, ); messageBubble.appendChild(messageStateToHtml); messageBubble.appendChild(mediaListView); if (ctaText && ctaLink && ctaStyle) { const button = document.createElement('a'); button.setAttribute('href', ctaLink); button.setAttribute('target', '_blank'); button.setAttribute('style', ctaStyle); button.textContent = ctaText; messageBubble.appendChild(button); } const pElement = document.createElement('p'); pElement.appendChild(document.createTextNode('')); // InnerHtml pour balises html ( etc) pElement.innerHTML = title; const p2Element = document.createElement('p'); p2Element.appendChild(document.createTextNode('')); // InnerHtml pour balises html ( etc) p2Element.innerHTML = description; messageStateToHtml.appendChild(pElement); // messageStateToHtml.appendChild(createParagraphWithBreak()); messageStateToHtml.appendChild(p2Element); return messageView; } function displayOutroMessage (messageInfos, toDetect, title, avatar) { const message = createOperatorMessage( title, messageInfos.description, messageInfos.ctaText, messageInfos.ctaLink, messageInfos.ctaStyle, messageInfos.imgUrl, messageInfos.vidUrl, avatar, 'L6NfH', 'aCPuH', 'RAywp', 'wDvHN', '__maY', '_A_Bb', 'zEgAc', 'cFe1K', 'iVNWZ', ); const operatorIframe = document.getElementById('fastoryOperator').contentWindow.document; const operatorScroller = operatorIframe.querySelector('[class*="fastory-Operator-scroller-"]'); const previousMessage = operatorIframe.getElementById('bot-game-points'); if (previousMessage) { previousMessage.replaceWith(message); const operatorButtonIframe = document.getElementById('fastoryOperatorButton').contentWindow.document; operatorButtonIframe.addEventListener('DOMSubtreeModified', function buttonListener () { const operatorButton = operatorButtonIframe.querySelector('[class*="fastory-FrameButton-view-"]'); setTimeout(() => { operatorButton.firstChild.click(); }, 100); operatorButtonIframe.removeEventListener('DOMSubtreeModified', buttonListener); }); } else { operatorIframe.addEventListener('DOMSubtreeModified', function operatorListener () { const messagesList = operatorIframe.querySelectorAll('[class*="fastory-Message-"]'); const messageTrigger = messagesList[messagesList.length - 1]; if (messageTrigger.textContent.includes(toDetect)) { operatorScroller.firstChild.appendChild(message); operatorIframe.removeEventListener('DOMSubtreeModified', operatorListener); } }); } } { // Define the personallities that will be displayed // If no ctaText and ctaLink and ctaStyle are provided, no button will be displayed const defaultCtaStyle = 'color: white; background-color: red; font-size: 1.2em; font-weight: 400, border: 1px solid red; border-radius: 5px; display: block; padding: 12px; margin-top: 12px; text-align: center; text-decoration: none;'; const defaultCtaText = 'En savoir plus'; const defaultCtaLink = 'https://www.google.com/'; /** Pour ajouter un bouton CTA sur une personnalité, il faut ajouter au type souhaité ci-dessous : ctaLink: defaultCtaLink, ctaText: defaultCtaText, ctaStyle: defaultCtaStyle (utiliseront les params par défaut situé au dessus) OU ctaLink: "https://google.com", ctaText: "google bouton", ctaStyle: "color: red; background-color: black;" */ const messages = { type_1: { description: 'Dommage, il faut minimum 10 points pour débloquer un don. Retente ta chance !', imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_2: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 1€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_3: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 2€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_4: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 3€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_5: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 4€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_6: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 5€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_7: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 6€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_8: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 7€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_9: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 8€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_10: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 9€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, type_11: { description: "Grâce à ta participation, Bonobo s'engage à verser un don de 10€ aux Restos du Coeur 🫶", imgUrl: 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-logo.png', }, }; const avatar = 'https://static.story.tl/custom/assets/workspace/swipeback/bonobo/bot-avatar.png'; const messagetoDetect = 'Un grand merci pour ta participation 🙏'; const messageTitle = 'Ton Score est de ' + <> + ' 👏'; const message = messages[defineMessageToDisplay(<>)]; displayOutroMessage(message, messagetoDetect, messageTitle, avatar); }