Target widget image via CSS

I can successfully alter the size of the 'launcher' using this code (green arrow),
.vfrc-launcher {
width: 60px;
height: 60px;
}
.vfrc-launcher {
width: 60px;
height: 60px;
}
The issue i'm having is I want to change the main image size in the launcher (red arrow) and make it bigger but I can't target it by any of the available css, is this possible?
No description
8 Replies
Tico | Voiceflow Assistant
To change the main image size in the launcher of your Voiceflow Chat Widget, you can target the image within the launcher using CSS. Here's how you can do it:
.vfrc-widget--chat {
width: 600px; /* Adjust the width as needed */
}
.vfrc-system-response--list .vfrc-message--chat {
max-width: 460px; /* Adjust the max-width as needed */
width: 400px; /* Adjust the width as needed */
}
.vfrc-widget--chat {
width: 600px; /* Adjust the width as needed */
}
.vfrc-system-response--list .vfrc-message--chat {
max-width: 460px; /* Adjust the max-width as needed */
width: 400px; /* Adjust the width as needed */
}
This CSS targets the elements within the .vfrc-widget--chat and .vfrc-system-response--list .vfrc-message--chat classes, allowing you to resize the chat widget and system response messages. For more information on customizing the chat widget, you can refer to the Voiceflow Chat Widget Documentation.
Steve B. | IntelleSync.ai
No good for me... Can offer any assistance please? @W. Williams (SFT)
foreign-sapphire
foreign-sapphire16mo ago
.vfrc-launcher img {
width: 100px;
height: 100px;
}
.vfrc-launcher img {
width: 100px;
height: 100px;
}
Try this, it works for me.
W. Williams (SFT)
👆 that should work
Steve B. | IntelleSync.ai
Thanks again @randompenna ☺️
fascinating-indigo
fascinating-indigo15mo ago
@randompenna adding 50XP for ya for a 10/10 answer
plain-purple
plain-purple3mo ago
Where could I add this css? I want the image to be full screen as well
Steve B. | IntelleSync.ai
You can add css inline like this https://discord.com/channels/1079548823610871889/1335991918940655646 which is the more convnient way or via a hosted css file. https://docs.voiceflow.com/docs/embed-customize-styling
Voiceflow
Embed and customize styling
Modify the CSS of your web chat and embed it within a page

Did you find this page helpful?