rkb•5mo ago

What's the easiest way to change this downward facing arrow to an "x"?

4 Replies

You can’t swap the minimise arrow from the widget settings panel yet, but the icon is just a normal DOM element, so one CSS override is all you need. 1️⃣ Add (or link) a small stylesheet when you load the widget

<script>
  (d => {
    const s = d.createElement('script');
    s.onload = () => {
      window.voiceflow.chat.load({
        verify: { projectID: 'YOUR-ID' },
        url: 'https://general-runtime.voiceflow.com',
        versionID: 'production',
        assistant: {
          // point to an external file …
          // stylesheet: 'https://yourdomain.com/widget-styles.css'

          // … or embed the rules directly
          stylesheet: `
            /* hide the built-in chevron */
            .vfrc-header .vfrc-icon{display:none;}
            /* draw your own “x” in its place */
            .vfrc-header::after{
              content:'\2715';          /* × */
              font-size:18px;
              line-height:1;
              color:#333;
              cursor:pointer;
            }
          `
        }
      });
    };
    s.src = 'https://cdn.voiceflow.com/widget-next/bundle.mjs';
    d.head.appendChild(s);
  })(document);
</script>

<script>
  (d => {
    const s = d.createElement('script');
    s.onload = () => {
      window.voiceflow.chat.load({
        verify: { projectID: 'YOUR-ID' },
        url: 'https://general-runtime.voiceflow.com',
        versionID: 'production',
        assistant: {
          // point to an external file …
          // stylesheet: 'https://yourdomain.com/widget-styles.css'

          // … or embed the rules directly
          stylesheet: `
            /* hide the built-in chevron */
            .vfrc-header .vfrc-icon{display:none;}
            /* draw your own “x” in its place */
            .vfrc-header::after{
              content:'\2715';          /* × */
              font-size:18px;
              line-height:1;
              color:#333;
              cursor:pointer;
            }
          `
        }
      });
    };
    s.src = 'https://cdn.voiceflow.com/widget-next/bundle.mjs';
    d.head.appendChild(s);
  })(document);
</script>

How it works • .vfrc-header .vfrc-icon is the arrow element – we hide it. • We then use a ::after pseudo-element on the header to render the Unicode “×”. (Swap for an SVG with background-image: if you prefer a custom graphic.) You can keep the CSS in a separate file and reference it with assistant.stylesheet instead of the inline string—whichever is easier for your setup. Docs: Custom web-chat styling → targeting .vfrc-* classes https://docs.voiceflow.com

rkbOP•5mo ago

just tried embedding the rules directly but it didn't work - are those css classes correct?

W. Williams (SFT)•5mo ago

might be the old ones. just inspect the button and then update the code above.

rkbOP•5mo ago

figured it out - you were right @W. Williams (SFT) for anyone that wants to change this, the class is .vfrc-widget

What's the easiest way to change this downward facing arrow to an "x"?

Did you find this page helpful?