> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Demos on mobile

> Configure how your demos appear on mobile devices and smaller screens.

export const MediaCard = ({title = '', url, type = 'demo'}) => {
  const attributes = type === 'demo' ? {
    'data-navattic-open': url,
    'data-navattic-title': title
  } : {
    'data-video': url
  };
  return <div {...attributes} className="hidden md:inline-block w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
<div className="flex items-center gap-3 bg-white dark:bg-gray-800 px-3 py-2">
<div className={`flex h-7 w-7 items-center justify-center rounded-md ${type === 'video' ? 'bg-blue-100 dark:bg-blue-900' : 'bg-orange-100 dark:bg-orange-900'}`} style={{
    backgroundColor: type === 'video' ? 'var(--video-bg)' : 'var(--demo-bg)'
  }}>
<Icon icon={type === 'video' ? 'circle-play' : 'square-mouse-pointer'} color={type === 'video' ? 'var(--video-icon)' : 'var(--demo-icon)'} />
</div>
<div>
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
{type === 'video' ? 'Watch video' : 'Try a demo'}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">{title}</div>
</div>
</div>
<style jsx>{`
  :root {
    --video-bg: #dbeafe;
    --video-icon: #2563eb;
    --demo-bg: #ffedd5;
    --demo-icon: #ea580c;
  }
  :global(.dark) {
    --video-bg: #1e3a8a;
    --video-icon: #60a5fa;
    --demo-bg: #7c2d12;
    --demo-icon: #fb923c;
  }
`}</style>
</div>;
};

<Frame>
  <img className="overflow-hidden rounded-xl border" src="https://mintcdn.com/navattic-app/bR17QzPUtrfb78_J/images/mobile-swipe-demo.png?fit=max&auto=format&n=bR17QzPUtrfb78_J&q=85&s=3390461646221c179a553b8e89807fd0" alt="Mobile swipe demo" width="1736" height="768" data-path="images/mobile-swipe-demo.png" />
</Frame>

Navattic provides multiple options for viewing demos on devices smaller than 800px wide - this includes most smart phones and smaller tablets.

To configure your mobile setting, open the `Mobile` tab on the Product demo page.

<MediaCard url="https://training.navattic.com/o3bq0xrd" type="demo" title="Demos on mobile" />

<MediaCard url="https://www.loom.com/share/c3e6f1c647c74434847c3e1e07689192?sid=ac9f0038-8a64-49cd-9193-44eb229b8539" title="Demos on mobile" type="video" />

## Mobile options

There are a few different options for viewing interactive demos on mobile devices:

<Tabs>
  <Tab title="Mobile zoom">
    The **Mobile zoom** option allows you to serve your standard desktop demo directly to users on mobile devices. When enabled, viewers can use familiar pinch-to-zoom gestures to enlarge, navigate, and interact with the product on their smaller screens. This provides a simple way to maintain your original layout while ensuring mobile visitors can comfortably explore your demo.
  </Tab>

  <Tab title="Mobile swipe demo">
    The Mobile swipe demo is used to engage your mobile visitors with a short and visual experience they can *swipe* through.

    `+ Copy from Flow` allows you to reuse Captures and copy from your existing demo.

    All Mobile swipe demos start with a Welcome and Farewell step. Click +Add to add steps in between. Each step contains an image, title, and description.

    **Best Practices**

    1. Include **no more than 8 steps.**
    2. Upload an Image or existing Capture to the **Welcome step.**
    3. If you are uploading your own image, use dimensions similar to height: `16rem` or `256px` and width: `24rem` or `384px`, allowing the image to cover a larger portion of the screen. Accepted file types include **.PNG**, **.GIF**, and **.JPEG**.
    4. Keep the text minimal and clear and focus on short, impactful sentences. The **Description** should complement the **Title**, but keep it to a minimum since it’s often skimmed.
    5. Edit the **Theme** of your Mobile swipe demo to match your brand. To do this, visit the **Theme** tab in your demo > **Edit Theme** > **Mobile Swipe**.

    **Additional Mobile Swipe settings**

    1. **Auto Progress**: Enabling **Auto Progress** for your Mobile Swipe Demo will automatically guide visitors through the demo by advancing to the next step after 4 seconds.
    2. **Confetti**: Toggle on **Completion confetti** to allow visitors to celebrate once they complete their final step!
    3. **Crop the Captures**: Crop the Captures or upload a new Image to ensure the images are colorful and eye-catching.
    4. **CTA Button**: Toggle on the **CTA button** and use **Open in new tab** to ensure Visitors can easily access it throughout the mobile swipe demo.
  </Tab>

  <Tab title="Mobile alert">
    The Mobile alert is a good option if you prefer not to present your demo to mobile viewers or do not expect heavy mobile traffic to your demo.

    **Message, Custom Image, or Video**

    You can either use the default mobile alert or create your own. The Mobile alert includes a title and description which can be edited in Build > Mobile > Mobile alert > Edit > **Message**.

    If you'd prefer to upload a custom image, select **Custom Image**. You can then upload an image from your local storage. Alternatively, select **Video** to upload a video from your local storage.
  </Tab>

  <Tab title="Mobile scaled view">
    With **Mobile scaled view** enabled, the Capture will appear on top of any dialog that is present on this step, while maintaining the proportions of your original app. We recommend taking Captures on a smaller window if you plan to use Mobile scaled view to ensure that elements remain legible on smaller devices.

    <Info>
      Check out [Klue's Demo Arena](https://klue.com/demo-arena) in a window below 800px wide or use a mobile simulator like [this Chrome
      extension](https://chromewebstore.google.com/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk)' ' to see examples of Mobile scaled view.
    </Info>
  </Tab>

  <Tab title="Show desktop demo">
    **Show desktop demo** is just what it sounds like -- a scaled-down version of your desktop demo will show on mobile devices.
  </Tab>
</Tabs>

#### Customer examples of mobile demos

<CardGroup cols={2}>
  <Card href="https://www.getmeez.com/" img="https://mintcdn.com/navattic-app/bR17QzPUtrfb78_J/images/mobile-demos-12.png?fit=max&auto=format&n=bR17QzPUtrfb78_J&q=85&s=6bed39003a895194ab755f76d4de97ad" title="Meez: Take a Tour" width="1298" height="632" data-path="images/mobile-demos-12.png">
    Mobile swipe demo
  </Card>

  <Card href="https://www.doppler.com/" img="https://mintcdn.com/navattic-app/bR17QzPUtrfb78_J/images/mobile-demos-13.png?fit=max&auto=format&n=bR17QzPUtrfb78_J&q=85&s=8a330cc6336331857e46e50972052ef9" title="Doppler: Take a self-guided tour" width="1296" height="664" data-path="images/mobile-demos-13.png">
    Mobile swipe demo
  </Card>

  <Card href="https://www.snaplogic.com/products/application-integration" img="https://mintcdn.com/navattic-app/bR17QzPUtrfb78_J/images/mobile-demos-14.png?fit=max&auto=format&n=bR17QzPUtrfb78_J&q=85&s=1cc9b92c1926487f651fda0fff06156e" title="SnapLogic: Take a tour" width="1317" height="673" data-path="images/mobile-demos-14.png">
    Mobile swipe demo
  </Card>

  <Card href="https://navattic-docs.navattic.com/m1860spg" img="https://mintcdn.com/navattic-app/2TSaKTXFRjfdIO0O/images/mobile-demos-15.png?fit=max&auto=format&n=2TSaKTXFRjfdIO0O&q=85&s=09ba0aeb91e0d63bea453ca62facd4d6" title="Navattic: Single step view" width="2800" height="1422" data-path="images/mobile-demos-15.png">
    Mobile zoom
  </Card>
</CardGroup>

<Info>
  View these examples in a window below 800px wide to activate the Mobile swipe view or use a mobile simulator like [this Chrome
  extension](https://chromewebstore.google.com/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk) .
</Info>