Haoyang•6h ago

Carousel Display Size❗

Hi, I have a question about the carousel display size. I noticed that the carousel in chat no longer shows images in full. The images are now cropped from the top and bottom, and a large part of the original picture is cut off, so they don’t fit the proper aspect ratio anymore. I’m not sure from which update this change started happening, but it wasn’t a problem before. Does anyone know how to fix this or what the recommended image size is so that the carousel can display the full image without cropping? Thanks in advance!

1 Reply

Tico | Voiceflow Assistant•6h ago

What changed?
Card/Carousel images are now rendered with background-size: cover; inside a fixed-height container. When the picture’s aspect ratio is taller than the container, it will be cropped on the top & bottom – exactly what you’re seeing. How to avoid the crop
1. Use a wider ratio (quick fix)
Supply your images in a wide format (≈16 : 9 – 2 : 1). Because the container is wider than it is tall, a wide image will fit completely without being trimmed. 2. Override the widget’s CSS (precise control)
If you’d like the widget to always show the entire image regardless of the file you upload, switch the image rule from cover to contain:

/* show full image inside cards / carousel */
.vfrc-image--background {
  background-size: contain !important;   /* fit the whole picture */
  background-position: center;           /* keep it centred */
}

/* show full image inside cards / carousel */
.vfrc-image--background {
  background-size: contain !important;   /* fit the whole picture */
  background-position: center;           /* keep it centred */
}

Add the rule through the assistant.stylesheet property when you load the chat widget:

window.voiceflow.chat.load({
  verify: { projectID: '<PROJECT_ID>' },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production',
  assistant: {
    /* link to a hosted CSS file … */
    stylesheet: 'https://yourdomain.com/chat-fix.css'
    /* …or embed it as a base64 data-URL */
  }
});

window.voiceflow.chat.load({
  verify: { projectID: '<PROJECT_ID>' },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production',
  assistant: {
    /* link to a hosted CSS file … */
    stylesheet: 'https://yourdomain.com/chat-fix.css'
    /* …or embed it as a base64 data-URL */
  }
});

(See “Custom web chat styling” docs for the full list of widget classes you can target.) Is there an official recommended size?
Voiceflow hasn’t published a fixed pixel size for carousel images; the widget simply stretches the image to the card’s width. Using a wide 16 : 9–ish ratio – or applying the CSS above – will guarantee nothing is cropped. Docs: https://docs.voiceflow.com → Custom web chat styling

Voiceflow

Welcome to Voiceflow's docs

Build, manage, and deliver chat and voice agents for customer support and beyond.

Carousel Display Size❗

Did you find this page helpful?