Images and media

Add screenshots, diagrams, blog images, and Open Graph images to Enscale docs and blog pages.

Use images to explain setup flows, dashboards, workflow templates, inbox behavior, and storefront widgets.

Where images live

Save public images in the public/images folder.

public/images/
  docs/
    inbox.png
    whatsapp-setup.png
    flow-builder.png
  blog/
    unified-inbox.png
    whatsapp-automation.png
  og/
    default-og.png

Files in public are served from the site root.

For example:

public/images/docs/inbox.png

is available at:

/images/docs/inbox.png

Basic Markdown image

Use regular Markdown for simple inline images.

![Inbox screenshot](/images/docs/inbox.png)

Recommended screenshot component

Use DocImage for polished documentation screenshots with borders and captions.

<DocImage
  src="/images/docs/inbox.png"
  alt="Enscale dedicated inbox showing a WhatsApp conversation"
  caption="The dedicated inbox helps support agents manage customer conversations across channels."
/>

Image grid

Use ImageGrid and ImageCard when comparing multiple screens or steps.

<ImageGrid>
  <ImageCard
    src="/images/docs/whatsapp-setup.png"
    alt="WhatsApp setup screen"
    title="Connect WhatsApp"
    description="Connect the merchant’s WhatsApp Business account."
  />
  <ImageCard
    src="/images/docs/flow-builder.png"
    alt="Workflow builder screen"
    title="Build a workflow"
    description="Create a WhatsApp review request automation."
  />
</ImageGrid>

Blog images

Blog pages are written in TSX today. Use a regular image tag inside blog content.

<img
  src="/images/blog/whatsapp-automation.png"
  alt="WhatsApp automation flow for Shopify"
/>

Open Graph images

Use 1200x630 images for social sharing.

Recommended folder:

public/images/og/

The app already has a generated default Open Graph image. Add custom static OG images later when the brand visuals are ready.

Image guidelines

Use descriptive alt text.
Prefer .webp for screenshots when possible.
Keep images below 300 KB when practical.
Use 1600x900 for wide documentation screenshots.
Use 1200x630 for social images.
Avoid screenshots with private merchant/customer data.
Blur phone numbers, emails, access tokens, and customer messages before publishing.