ratty-blush•2y ago

ChatBot Look

So my client would like a chatbot icon that is red but voiceflow keeps adding this black boarder around the icon. This is a really important client i have and i cannot seem to fix this issue. The Would like to keep the main colours black of the header and speech bubbles , does anyone have any idea how to fix this please?

5 Replies

NiKo | Voiceflow•2y ago

Can you share the image file you are using?

ratty-blushOP•2y ago

What file do you recommend using ? i tired PNG image. Im not sure why voice flow makes my image smaller to force a black background . Id like my client to just have a black chat bot with red icon, thank you so much for reaching out to help

ratty-blushOP•2y ago

no matter what image i get the background is black , is there a way to have 2 different colours ? or atleast make the image bigger?

NiKo | Voiceflow•2y ago

Looks like a bug. Thanks for flagging it. In the meantime, you can use a transparent PNG and load a custom style in the chat snippet code to change the launcher background color. Bellow an example using a Base64 encoded version of this:

.vfrc-launcher {
  background-color: #b03034;
}

.vfrc-launcher {
  background-color: #b03034;
}

Load the Chat widget with this style to change the background color of the launcher button.

(function(d, t) {
      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
      v.onload = function() {
        window.voiceflow.chat.load({
          verify: { projectID: '65bbad2260196747f4da7964' },
          url: 'https://general-runtime.voiceflow.com',
          versionID: 'development',
            assistant: {
                        stylesheet: 'data:text/css;base64,LnZmcmMtbGF1bmNoZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNiMDMwMzQ7Cn0='
                        }
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
  })(document, 'script');

(function(d, t) {
      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
      v.onload = function() {
        window.voiceflow.chat.load({
          verify: { projectID: '65bbad2260196747f4da7964' },
          url: 'https://general-runtime.voiceflow.com',
          versionID: 'development',
            assistant: {
                        stylesheet: 'data:text/css;base64,LnZmcmMtbGF1bmNoZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNiMDMwMzQ7Cn0='
                        }
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
  })(document, 'script');

ratty-blushOP•2y ago

Okay thank you for your help ! That’s awesome ♥️

ChatBot Look

Did you find this page helpful?