Table of Contents

How to change Avatar dynamically (Landbot v3)

Pau Sanchez Updated by Pau Sanchez

If you want to change the Avatar due to any conversation design reason, you can do it easily with this snippet:

/*CHANGE THE URL BELOW FOR THE ONE OF YOUR DESIRED NEW AVATAR*/
var picUrl = "https://upload.wikimedia.org/wikipedia/commons/6/6e/Mona_Lisa_bw_square.jpeg";

/*DO NOT EDIT BELOW THIS LINE*/
var avatares = this.document.querySelectorAll(".Avatar:not(.avatarOriginal)");
window.cssRuleApplied;

if (window.cssRuleApplied !== true) {
    for (var i = 0; i < avatares.length; i++) {
        avatares[i].classList.add('avatarOriginal');
    }
    window.cssRuleApplied = true;
}

// Create a new stylesheet
var styleSheet = this.document.createElement("style");
this.document.head.appendChild(styleSheet);

// Define the CSS rule
var cssRule = `.Avatar:not(.avatarOriginal) {content: url(${picUrl})!important;}`;

// Insert the rule into the new stylesheet
styleSheet.sheet.insertRule(cssRule, 0);

/*DO NOT EDIT ABOVE THIS LINE*/

Add it in a Code block in the step where you want the Avatar to change:

To set your own Avatar, only change the url in the second line where is "var picUrl"

Bear in mind that this change can only be applied once

How did we do?

Javascript in WhatsApp

Contact