Add Text, Images and GIFs to Experiences
Add and format text, images, GIFs, and hero images in your experiences.
Table of Contents
Add text
- Open your experience in the Builder.
- Click the + icon and select Text.
- Start typing. Use the formatting toolbar to change headers, font, size, color, weight, alignment, and lists.
Formatting applied in the Builder overrides the defaults from your Theme.
You can also add emojis, personalization tokens, and hyperlinks from the toolbar.
If you use custom fonts in your Theme, the font won't appear in the Builder dropdown — but it will be applied by default whenever you add a text block.
Add an image or GIF
- Click the + icon and select Image/GIF.
- Drag and drop a file, click the upload icon to browse your computer, or select Select from gallery to reuse a previously uploaded image.
After uploading, you can resize the image directly in the Builder, change alignment, adjust margins, and add alt text.
Image actions
You can make an image clickable. Select the image and choose one of these actions:
- Go to a URL — opens a link when the user clicks the image.
- Trigger a Flow — launches another Flow when the user clicks the image. Enter the Flow ID (see Find a Flow ID).
Add a hero image
A hero is a header image that stretches edge-to-edge inside a Modal or Slideout. It also lets you overlay heading text on top of the image. Unlike regular images, heroes crop and fill their frame — so you can upload larger images and adjust the framing in the Builder.
- Click the + icon and select Hero.
- Drag and drop a file, browse your computer, or select from your gallery.
Supported formats and recommended sizes
Supported image formats
JPG, PNG, SVG, and GIF are all supported. The maximum file size is 5 MB. For the best user experience, keep images under 1 MB.
Lottie files are not supported directly, but you can convert them to GIF before uploading.
Targeting SVGs or content inside SVG files is not supported.
Supported video formats
Videos cannot be uploaded to Appcues directly. Host your video on a service like YouTube, Vimeo, or Wistia and embed it using the video or HTML component. See Embed a Video in a Flow.
Recommended image sizes
Modals
| Setting | Recommendation |
|---|---|
| Minimum width | 650px |
| Minimum width (Retina) | 1200px |
| Maximum height | 600px |
Slideouts
| Setting | Recommendation |
|---|---|
| Minimum width | 400px |
| Minimum width (Retina) | 800px |
| Maximum height | 400px |
Hero images
| Setting | Recommendation |
|---|---|
| Minimum width | 650px |
| Minimum width (Retina) | 1300px |
| Minimum height | 200px |
| Maximum height | None (image is cropped to fit) |
Pin icons
Default Appcues icons are 21×21px. Uploaded SVG icons can be any size and are adjustable in the Builder. Square dimensions (equal width and height) are recommended for clarity.
Image optimization
Appcues does not resample or optimize images on upload. Images are scaled to fit their container, so use dimensions high enough to maintain quality at the display size. Optimize your images before uploading (compress file size, use appropriate resolution) to ensure fast load times.
Reusing images
Images uploaded to any experience are added to your content gallery. When adding a new image or hero, select Select from gallery to reuse an existing image. The gallery filters by size and type restrictions for the current block.
If images aren't loading or look wrong
- Check file size. Images over 5 MB will be rejected. Keep images under 1 MB for best performance.
- Check dimensions. If an image looks blurry, it's likely too small for the container. Use the recommended sizes above.
- Check format. Only JPG, PNG, SVG, and GIF are supported. Video files must be embedded, not uploaded.
Still stuck? Contact support@appcues.com with the experience URL and a screenshot of the issue.