Aller au contenu

Ajout d'un overlay donation goal avec paliers et feu d'artifices

Cet overlay a été conçu pour fonctionner avec le service StreamElements et les événements de donation Paypal géré par StreamElements.

Vidéo : https://youtu.be/UVUTtqjG920?feature=shared

Mise en place

Partie Dashboard

Partie Overlay

  • Aller dans Outils de streaming > Overlays : https://streamelements.com/dashboard/overlays

  • Ajouter un overlay de 1080p (résolution courante pour du streaming) avec un nom parlant ("donation goal avec paliers" par exemple)

  • Ajouter un widget de type Custom widget (Static / custom > Custom widget)

  • Sélectionner le nouveau widget et cliquer sur le menu Layers
  • Sous l'intitulé "Custom widget 1", vous devriez avoir 3 sous-menu : "Settings", "Position, size and style" et "animation settings"
  • Cliquer sur "Position, size and style" pour développer le sous-menu
  • Mettre les settings suivants :
    • Width: 1920
    • Height: 1080
    • Top: 0
    • Left: 0
  • Cliquer sur le sous-menu "Settings" maintenant pui sle bouton "Open Editor"
  • Vider les contenus des 5 onglets : HTML, CSS, JS, FIELDS et data

  • Mettre les nouveaux contenus suivants dans les onglets correspondants

    Contenu à copier-coller

    <!--
/* 
* @author vignemail1+dongoal-widget@gmail.com
* @version 1.0
*/
-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family={{fontFamily}}:400,700" rel="stylesheet">
<div id="container">
  <div id="milestone-description"></div>
  <div id="progress-container">
    <div id="progress-bar">
      <div id="milestone-goal"></div>
    </div>
    <div id="amount-display">
      <span id="current-amount">$0</span> / <span id="goal-amount">$10</span>
    </div>
  </div>
  <div id="fireworks-container"></div>
</div>

    /* 
* @author vignemail1+dongoal-widget@gmail.com
* @version 1.0
*/

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: {{fontFamily}}, sans-serif;
}

#container {
    width: 1920px;
    height: 1080px;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
}

#progress-container {
    width: calc(50% - 40px);
    height: 60px;
    background-color: {{backgroundColor}};
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30px;
}

#progress-container.top {
    top: 20px;
}

#progress-container.bottom {
    bottom: 20px;
}

#progress-bar {
    height: 100%;
    width: 0;
    background-color: {{barColor}};
    transition: width 0.5s ease-in-out;
    border-radius: 30px;
}

#milestone-goal {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

#amount-display {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

#milestone-goal, #amount-display, #milestone-description {
    color: {{textColor}};
}

#milestone-description {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(50% - 40px);
    text-align: center;
    color: white;
    font-size: 22px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

#fireworks-container {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 100px;
    bottom: 100px;
}

.firework {
    position: absolute;
}

.firework.circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: explode 2.5s ease-out forwards;
}

.firework.heart {
    width: 20px;
    height: 18px;
    background-color: transparent;
    position: relative;
    animation: explodeHeart 3.5s ease-out forwards;
}

.firework.heart::before,
.firework.heart::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10px;
    height: 16px;
    background-color: red;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 0 0 1px white;
}

.firework.heart::before {
    left: 10px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.firework.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.firework.star {
    width: 10px;
    height: 10px;
    background-color: yellow;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.firework.rectangle {
    background-color: gold;
    transform-origin: center;
    animation: explode 2.5s ease-out forwards;
}

@keyframes explodeHeart {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    70% {
        transform: scale(12);
        opacity: 1;
    }
    100% {
        transform: scale(12);
        opacity: 0;
    }
}

@keyframes explode {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(12) rotate(360deg);
        opacity: 0;
    }
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
    }
}

.firework {
    position: absolute;
    animation: float 3s ease-in-out;
}

    /* 
* @author vignemail1+dongoal-widget@gmail.com
* @version 1.0
*/

let totalAmount = 0;
let milestones = [];
let currentMilestoneIndex = 0;
let currencySymbol = '$';
let audio;
let particleShape;
let subValueT1, subValueT2, subValueT3, subValuePrime, subgiftValueT1, subgiftValueT2, subgiftValueT3;
let cheerValue;
let isInitialLoad = true;
let fieldData;

function saveTotalAmount() {
    console.log("Saving total amount:", totalAmount);
    return SE_API.store.set('totalDonationAmount', totalAmount.toString())
        .then(() => {
            console.log("Total amount saved successfully");
        })
        .catch(error => {
            console.error("Error saving total amount:", error);
        });
}

function loadTotalAmount() {
    return SE_API.store.get('totalDonationAmount')
        .then(storedData => {
            console.log("Loaded stored data:", storedData);
            let value;
            if (typeof storedData === 'object' && storedData !== null && 'value' in storedData) {
                value = storedData.value;
            } else {
                value = storedData;
            }
            console.log("Extracted value:", value);
            const parsedValue = parseFloat(value);
            return isNaN(parsedValue) ? 0 : parsedValue;
        })
        .catch(error => {
            console.error("Error loading total amount:", error);
            return 0;
        });
}

window.addEventListener('onWidgetLoad', function (obj) {
    fieldData = obj.detail.fieldData; // Modifiez cette ligne
    console.log("Widget loaded with field data:", fieldData);
    console.log("Initial resetAmount value:", fieldData.resetAmount);
    console.log("Initial milestone description:", fieldData.initialMilestoneDescription);

    milestones = [];
    for (let i = 1; i <= 10; i++) {
        const amount = fieldData[`milestone${i}Amount`];
        const description = fieldData[`milestone${i}Description`];
        const goal = fieldData[`milestone${i}Goal`];
        if (amount && description && goal) {
            milestones.push({ amount: parseFloat(amount), description: description, goal: goal });
        }
    }

    milestones.sort((a, b) => a.amount - b.amount);
    console.log("Sorted milestones:", milestones);

    currencySymbol = fieldData.currency === 'euro' ? '€' : '$';

    if (fieldData.milestoneSound) {
        audio = new Audio(fieldData.milestoneSound);
    }

    particleShape = fieldData.particleShape || 'circle';

    subValueT1 = parseFloat(fieldData.subValueT1) || 5;
    subValueT2 = parseFloat(fieldData.subValueT2) || 10;
    subValueT3 = parseFloat(fieldData.subValueT3) || 25;
    subValuePrime = parseFloat(fieldData.subValuePrime) || 5;
    subgiftValueT1 = parseFloat(fieldData.subgiftValueT1) || 5;
    subgiftValueT2 = parseFloat(fieldData.subgiftValueT2) || 10;
    subgiftValueT3 = parseFloat(fieldData.subgiftValueT3) || 25;
    cheerValue = parseFloat(fieldData.cheerValue) || 1;

    applyProgressBarPosition(fieldData.progressBarPosition || 'top');

    loadTotalAmount().then(storedAmount => {
        console.log("Loaded stored amount:", storedAmount);
        const resetAmount = parseFloat(fieldData.resetAmount);
        if (!isNaN(resetAmount)) {
            console.log("Using resetAmount for initialization:", resetAmount);
            totalAmount = resetAmount;
        } else {
            console.log("Using stored amount for initialization:", storedAmount);
            totalAmount = storedAmount;
        }
        updateDisplay();
        isInitialLoad = false;
    });

    document.body.style.fontFamily = fieldData.fontFamily + ', sans-serif';
});

window.addEventListener('onEventReceived', function (obj) {
    console.log("Event received:", obj.detail);
    if (obj.detail.listener === "tip-latest") {
        const tipAmount = obj.detail.event.amount;
        updateAmount(tipAmount);
    } else if (obj.detail.listener === "subscriber-latest") {
        handleSubscription(obj.detail.event);
    } else if (obj.detail.listener === "cheer-latest") {
        handleCheer(obj.detail.event);
    } else if (obj.detail.listener === "widget-button") {
        if (obj.detail.field === "resetButton") {
            console.log("Reset button clicked");
            SE_API.getFieldValue('resetAmount').then(value => {
                const resetAmount = parseFloat(value) || 0;
                console.log("Current reset amount:", resetAmount);
                resetTotalAmount(resetAmount);
            }).catch(error => {
                console.error("Error getting reset amount:", error);
            });
        } else if (obj.detail.field === "fontFamily") {
            const selectedFont = obj.detail.value;
            document.body.style.fontFamily = selectedFont + ', sans-serif';
        }
    }
});

window.addEventListener('onFieldEditorValueChanged', function(obj) {
    console.log("Field editor value changed:", obj.detail);
    if (obj.detail.field === 'resetAmount') {
        const newResetAmount = parseFloat(obj.detail.value) || 0;
        console.log("Reset amount changed to:", newResetAmount);
        resetTotalAmount(newResetAmount);
    }
});

function handleSubscription(event) {
    let amount = 0;
    if (event.gifted) {
        switch(event.tier) {
            case '2000':
                amount = subgiftValueT2;
                break;
            case '3000':
                amount = subgiftValueT3;
                break;
            default:
                amount = subgiftValueT1;
        }
    } else {
        switch(event.tier) {
            case 'prime':
                amount = subValuePrime;
                break;
            case '2000':
                amount = subValueT2;
                break;
            case '3000':
                amount = subValueT3;
                break;
            default:
                amount = subValueT1;
        }
        amount *= event.months;
    }
    updateAmount(amount);
}

function handleCheer(event) {
    const amount = ((parseFloat(event.amount) || 0) / 100) * cheerValue;
    updateAmount(amount);
}

function applyProgressBarPosition(position) {
    const progressContainer = document.getElementById('progress-container');
    const milestoneDescription = document.getElementById('milestone-description');
    const fireworksContainer = document.getElementById('fireworks-container');

    progressContainer.className = position;

    if (position === 'bottom') {
        // Barre de progression en bas
        progressContainer.style.top = 'auto';
        progressContainer.style.bottom = '0';
        milestoneDescription.style.bottom = 'auto';
        milestoneDescription.style.top = '0';
        fireworksContainer.style.top = '30px';
        fireworksContainer.style.bottom = '100px';
    } else {
        // Barre de progression en haut (par défaut)
        progressContainer.style.top = '0';
        progressContainer.style.bottom = 'auto';
        milestoneDescription.style.top = '90px';
        milestoneDescription.style.bottom = 'auto';
        fireworksContainer.style.top = '150px';
        fireworksContainer.style.bottom = '20px';
    }
}

function getCurrentMilestone(amount = totalAmount) {
    for (let i = milestones.length - 1; i >= 0; i--) {
        if (amount >= milestones[i].amount) {
            return milestones[i];
        }
    }
    return { amount: 0, description: "", goal: "Premier palier" };
}

function getNextMilestone() {
    for (let i = 0; i < milestones.length; i++) {
        if (totalAmount < milestones[i].amount) {
            return milestones[i];
        }
    }
    return milestones[milestones.length - 1];
}

function updateAmount(amount) {
    console.log("Previous total:", totalAmount);
    console.log("Amount to add:", amount);
    const previousTotal = totalAmount;
    totalAmount = (parseFloat(totalAmount) || 0) + (parseFloat(amount) || 0);
    console.log("New total:", totalAmount);

    const previousMilestone = getCurrentMilestone(previousTotal);
    const currentMilestone = getCurrentMilestone(totalAmount);

    saveTotalAmount().then(() => {
        if (currentMilestone.amount > previousMilestone.amount) {
            console.log("New milestone reached:", currentMilestone);
            triggerFireworks();
        } else {
            console.log("No new milestone reached");
        }
        updateDisplay();
    });
}

function updateDisplay() {
    const currentMilestone = getCurrentMilestone();
    const nextMilestone = getNextMilestone();
    console.log("Updating display - Current total amount:", totalAmount);

    const displayAmount = isNaN(totalAmount) ? 0 : totalAmount;
    document.getElementById('current-amount').textContent = `${currencySymbol}${displayAmount.toFixed(2)}`;
    document.getElementById('goal-amount').textContent = `${currencySymbol}${nextMilestone.amount.toFixed(2)}`;

    const milestoneGoalElement = document.getElementById('milestone-goal');
    const milestoneDescriptionElement = document.getElementById('milestone-description');
    if (milestoneDescriptionElement) {
        if (totalAmount < milestones[0].amount) {
            // Utiliser le message initial si aucun palier n'est atteint
            milestoneDescriptionElement.textContent = fieldData.initialMilestoneDescription || "";
        } else {
            milestoneDescriptionElement.textContent = currentMilestone.description || "";
        }
    } else {
        console.error("Element 'milestone-description' not found");
    }

    if (milestoneGoalElement) {
        milestoneGoalElement.textContent = nextMilestone.goal || "Pas de palier défini";
    } else {
        console.error("Element 'milestone-goal' not found");
    }

    updateProgressBar(nextMilestone.amount);
}

function updateProgressBar(goalAmount) {
    const percentage = (totalAmount / goalAmount) * 100;
    document.getElementById('progress-bar').style.width = `${Math.min(percentage, 100)}%`;
}

function checkMilestone() {
    const previousMilestone = getCurrentMilestone(totalAmount - 0.01);
    const currentMilestone = getCurrentMilestone(totalAmount);

    console.log("Previous milestone:", previousMilestone);
    console.log("Current milestone:", currentMilestone);

    if (currentMilestone.amount > previousMilestone.amount) {
        console.log("New milestone reached:", currentMilestone);
        triggerFireworks();
    } else {
        console.log("No new milestone reached");
    }
}

function triggerFireworks() {
    console.log("Triggering fireworks for new milestone");
    playMilestoneSound();
    const duration = 8000;
    const interval = 200;
    const waves = duration / interval;

    for (let i = 0; i < waves; i++) {
        setTimeout(() => {
            createFirework();
        }, i * interval);
    }
}

function createFirework() {
    const fireworksContainer = document.getElementById('fireworks-container');
    const containerRect = fireworksContainer.getBoundingClientRect();

    let particleCount = particleShape === 'heart' || particleShape === 'star' ? 25 : 50;

    for (let i = 0; i < particleCount; i++) {
        const firework = document.createElement('div');
        firework.classList.add('firework', particleShape);

        const xPos = Math.random() * containerRect.width;
        const yPos = Math.random() * containerRect.height;

        firework.style.left = `${xPos}px`;
        firework.style.top = `${yPos}px`;

        if (particleShape === 'rectangle') {
            const maxLength = 2;
            const length = Math.random() * (maxLength - 1) + 1;
            const width = 1;
            const rotation = Math.random() * 360;

            firework.style.width = `${length}px`;
            firework.style.height = `${width}px`;
            firework.style.transform = `rotate(${rotation}deg)`;
            firework.style.backgroundColor = getRandomColor();
        } else if (particleShape === 'star') {
            firework.style.width = '10px';
            firework.style.height = '10px';
            firework.style.backgroundColor = 'yellow';
            firework.style.clipPath = 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)';
        } else if (particleShape !== 'heart') {
            firework.style.backgroundColor = getRandomColor();
        }

        fireworksContainer.appendChild(firework);

        setTimeout(() => {
            firework.remove();
        }, particleShape === 'heart' || particleShape === 'star' ? 3500 : 2500);
    }
}

function getRandomColor() {
    return `hsl(${Math.random() * 360}, 100%, 50%)`;
}

function playMilestoneSound() {
    if (audio) {
        audio.volume = 0;
        audio.currentTime = 0;
        audio.play().then(() => {
            fadeAudio(0, 1, 500);
            setTimeout(() => fadeAudio(1, 0, 500), 7500);
        }).catch(error => console.error("Erreur lors de la lecture du son:", error));
    }
}

function fadeAudio(start, end, duration) {
    const interval = 50;
    const steps = duration / interval;
    const step_size = (end - start) / steps;
    let current = start;
    const fade = setInterval(() => {
        current += step_size;
        if ((step_size > 0 && current >= end) || (step_size < 0 && current <= end)) {
            clearInterval(fade);
            audio.volume = end;
        } else {
            audio.volume = current;
        }
    }, interval);
}

function resetTotalAmount(amount) {
    console.log("Resetting total amount to:", amount);
    const previousTotal = totalAmount;
    totalAmount = parseFloat(amount) || 0;
    updateDisplay();
    saveTotalAmount().then(() => {
        console.log("Total amount reset and saved:", totalAmount);
        const previousMilestone = getCurrentMilestone(previousTotal);
        const currentMilestone = getCurrentMilestone(totalAmount);
        if (currentMilestone.amount > previousMilestone.amount) {
            console.log("New milestone reached after reset:", currentMilestone);
            triggerFireworks();
        } else {
            console.log("No new milestone reached after reset");
        }
    });
}

    {
  "progressBarPosition": {
    "type": "dropdown",
    "label": "Position de la barre de progression",
    "value": "top",
    "options": {
      "top": "En haut",
      "bottom": "En bas"
    }
  },
  "fontFamily": {
    "type": "dropdown",
    "label": "police d'écriture",
    "options": {
      "Arial": "Arial",
      "Verdana": "Verdana",
      "Helvetica": "Helvetica",
      "Georgia": "Georgia",
      "Times New Roman": "Times New Roman",
      "Tahoma": "Tahoma",
      "Courier New": "Courier New",
      "Impact": "Impact",
      "Trebuchet MS": "Trebuchet MS",
      "Comic Sans MS": "Comic Sans MS",
      "Roboto": "Roboto"
    },
    "value": "Roboto",
    "group": "Style"
  },
  "barColor": {
    "type": "colorpicker",
    "label": "Couleur de la barre de progression",
    "value": "#4CAF50",
    "group": "Style"
  },
  "backgroundColor": {
    "type": "colorpicker",
    "label": "Couleur de fond",
    "value": "#333333",
    "group": "Style"
  },
  "textColor": {
    "type": "colorpicker",
    "label": "Couleur du texte",
    "value": "#FFFFFF",
    "group": "Style"
  },
  "particleShape": {
    "type": "dropdown",
    "label": "Forme des particules",
    "value": "circle",
    "options": {
      "circle": "Cercle",
      "heart": "Cœur",
      "rectangle": "Paillettes",
      "star": "Étoile"
    },
    "group": "Style"
  },
  "resetAmount": {
    "type": "number",
    "label": "Montant de réinitialisation",
    "value": 0,
    "group": "Dons"
  },
  "resetButton": {
    "type": "button",
    "label": "Réinitialiser le total des dons",
    "value": "reset",
    "group": "Dons"
  },
  "currency": {
    "type": "dropdown",
    "label": "Devise",
    "options": {
      "dollar": "Dollar ($)",
      "euro": "Euro (€)"
    },
    "value": "euro",
    "group": "Dons"
  },
  "initialMilestoneDescription": {
    "type": "text",
    "label": "Message initial avant le premier palier",
    "value": "Commençons cette collecte de fonds !",
    "group": "Dons"
  },
  "subValueT1": {
    "type": "number",
    "label": "Valeur d'un sub T1 (en monnaie)",
    "value": 5,
    "group": "Conversion en monnaie"
  },
  "subValueT2": {
    "type": "number",
    "label": "Valeur d'un sub T2 (en monnaie)",
    "value": 10,
    "group": "Conversion en monnaie"
  },
  "subValueT3": {
    "type": "number",
    "label": "Valeur d'un sub T3 (en monnaie)",
    "value": 25,
    "group": "Conversion en monnaie"
  },
  "subValuePrime": {
    "type": "number",
    "label": "Valeur d'un sub Prime (en monnaie)",
    "value": 5,
    "group": "Conversion en monnaie"
  },
  "subgiftValueT1": {
    "type": "number",
    "label": "Valeur d'un subgift T1 (en monnaie)",
    "value": 5,
    "group": "Conversion en monnaie"
  },
  "subgiftValueT2": {
    "type": "number",
    "label": "Valeur d'un subgift T2 (en monnaie)",
    "value": 10,
    "group": "Conversion en monnaie"
  },
  "subgiftValueT3": {
    "type": "number",
    "label": "Valeur d'un subgift T3 (en monnaie)",
    "value": 25,
    "group": "Conversion en monnaie"
  },
  "cheerValue": {
    "type": "number",
    "label": "Valeur pour 100 bits (en monnaie)",
    "value": 1,
    "group": "Conversion en monnaie"
  },
  "milestoneSound": {
    "type": "sound-input",
    "label": "Son pour l'atteinte d'un palier",
    "value": ""
  },
  "milestone1Amount": {
    "type": "number",
    "label": "Palier 1 - Montant",
    "value": 10,
    "group": "Palier 1"
  },
  "milestone1Description": {
    "type": "text",
    "label": "Palier 1 - Description",
    "value": "Premier palier atteint !",
    "group": "Palier 1"
  },
  "milestone1Goal": {
    "type": "text",
    "label": "Palier 1 - Objectif",
    "value": "Objectif : Un nouveau micro !",
    "group": "Palier 1"
  },
  "milestone2Amount": {
    "type": "number",
    "label": "Palier 2 - Montant",
    "value": 20,
    "group": "Palier 2"
  },
  "milestone2Description": {
    "type": "text",
    "label": "Palier 2 - Description",
    "value": "Continuez comme ça !",
    "group": "Palier 2"
  },
  "milestone2Goal": {
    "type": "text",
    "label": "Palier 2 - Objectif",
    "value": "Objectif : Une nouvelle webcam !",
    "group": "Palier 2"
  },
  "milestone3Amount": {
    "type": "number",
    "label": "Palier 3 - Montant",
    "value": 50,
    "group": "Palier 3"
  },
  "milestone3Description": {
    "type": "text",
    "label": "Palier 3 - Description",
    "value": "Vous êtes incroyables !",
    "group": "Palier 3"
  },
  "milestone3Goal": {
    "type": "text",
    "label": "Palier 3 - Objectif",
    "value": "Objectif : Une nouvelle webcam !",
    "group": "Palier 3"
  },
  "milestone4Amount": {
    "type": "number",
    "label": "Palier 4 - Montant",
    "value": 100,
    "group": "Palier 4"
  },
  "milestone4Description": {
    "type": "text",
    "label": "Palier 4 - Description",
    "value": "On est à mi-chemin !",
    "group": "Palier 4"
  },
  "milestone4Goal": {
    "type": "text",
    "label": "Palier 4 - Objectif",
    "value": "Objectif : Une nouvelle webcam !",
    "group": "Palier 4"
  },
  "milestone5Amount": {
    "type": "number",
    "label": "Palier 5 - Montant",
    "value": 200,
    "group": "Palier 5"
  },
  "milestone5Description": {
    "type": "text",
    "label": "Palier 5 - Description",
    "value": "Ça devient sérieux !",
    "group": "Palier 5"
  },
  "milestone5Goal": {
    "type": "text",
    "label": "Palier 5 - Objectif",
    "value": "Objectif : Une nouvelle webcam !",
    "group": "Palier 5"
  },
  "milestone6Amount": {
    "type": "number",
    "label": "Palier 6 - Montant",
    "value": 500,
    "group": "Palier 6"
  },
  "milestone6Description": {
    "type": "text",
    "label": "Palier 6 - Description",
    "value": "Quelle générosité !",
    "group": "Palier 6"
  },
  "milestone6Goal": {
    "type": "text",
    "label": "Palier 6 - Objectif",
    "value": "Objectif : Une nouvelle webcam !",
    "group": "Palier 6"
  },
  "milestone7Amount": {
    "type": "number",
    "label": "Palier 7 - Montant",
    "value": 1000,
    "group": "Palier 7"
  },
  "milestone7Description": {
    "type": "text",
    "label": "Palier 7 - Description",
    "value": "C'est fou !",
    "group": "Palier 7"
  },
  "milestone7Goal": {
    "type": "text",
    "label": "Palier 7 - Objectif",
    "value": "Objectif : Une nouvelle webcam !",
    "group": "Palier 7"
  },
  "milestone8Amount": {
    "type": "number",
    "label": "Palier 8 - Montant",
    "value": 2000,
    "group": "Palier 8"
  },
  "milestone8Description": {
    "type": "text",
    "label": "Palier 8 - Description",
    "value": "Je n'en reviens pas !",
    "group": "Palier 8"
  },
  "milestone8Goal": {
    "type": "text",
    "label": "Palier 8 - Objectif",
    "value": "Objectif : Une nouvelle webcam !",
    "group": "Palier 8"
  },
  "milestone9Amount": {
    "type": "number",
    "label": "Palier 9 - Montant",
    "value": 5000,
    "group": "Palier 9"
  },
  "milestone9Description": {
    "type": "text",
    "label": "Palier 9 - Description",
    "value": "Vous êtes les meilleurs !",
    "group": "Palier 9"
  },
  "milestone9Goal": {
    "type": "text",
    "label": "Palier 9 - Objectif",
    "value": "Objectif : Une nouvelle webcam !",
    "group": "Palier 9"
  },
  "milestone10Amount": {
    "type": "number",
    "label": "Palier 10 - Montant",
    "value": 10000,
    "group": "Palier 10"
  },
  "milestone10Description": {
    "type": "text",
    "label": "Palier 10 - Description",
    "value": "Objectif final atteint !",
    "group": "Palier 10"
  },
  "milestone10Goal": {
    "type": "text",
    "label": "Palier 10 - Objectif",
    "value": "Objectif : Une nouvelle webcam !",
    "group": "Palier 10"
  },
  "widgetName": {
    "type": "hidden",
    "value": "Donation goal with milestones and fireworks"
  },
  "widgetAuthor": {
    "type": "hidden",
    "value": "vignemail1@gmail.com"
  }
}

    {}

  • Pensez à bien faire "Done" pour chaque onglet

  • Pensez à cliquer sur "Save" en haut à droite pour enregistrer les modifications de l'overlay
  • Rafraîchir la fenêtre du navigateur (StreamElements souffre d'un défaut de mise à jour en temps-réel) et recontrôler les configurations faites sur l'overlay
  • Copier le lien de l'overlay avec le bouton en forme d'un maillon de chaîne

Partie OBS

  • Aller sur la scène qui vous intéresse
  • Ajouter une source navigateur web et ajouter les paramètres suivants :
    • url: l'url que vous avez copié à la fin de la configuration de l'overlay
    • height: 1920
    • width: 1080
    • contrôle l'audio dans OBS : coché
    • Disable when inactive : coché