---
title: Desktop vs. Mobile Experience
description: Use different embed codes on different devices
---

[Skip to content](https://learn.tryswivl.com/desktop-vs.-mobile-experience#main-content)

English

Show submenu for translations

![Full Color.png\]](https://learn.tryswivl.com/hs-fs/hubfs/Full%20Color.png?height=50&name=Full%20Color.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- [Go to Studio](https://v3.swivl.studio/)

[Go to Studio](https://v3.swivl.studio/)

 How can we help you?

- There are no suggestions because the search field is empty.

1. [Using swivl](https://learn.tryswivl.com/?hsLang=en)
2. [Chatbot Setup](https://learn.tryswivl.com/chatbot-setup?hsLang=en)

# Desktop vs. Mobile Experience

## Use different embed codes on different devices

Some of our customers want to treat Desktop and Mobile users differently. For example, they often want to have the chat embed pop up automatically after a delay on Desktop. On Mobile, however, they want it to stay put until a user interacts with it.

In this case, we would create two separate embed codes, one for each experience. The Desktop embed would have the logic to toggle the chat embed open, and the Mobile embed would not include this. See [this section](https://coda.io/d/_dzAMzMQFpNt/_suAyN) for more on creating & customizing embeds.

We've built the handler function that determines what device the user is on directly into the embed code. You'll need to replace the second \<script\> of your embed code with this one:

```
<script>if (Swivl.isMobile()) { Swivl.embed('XXXXXXXXXX')} else { Swivl.embed('XXXXXXXXXX')}</script>
```

 

The first embed code is what will be displayed on Mobile – the second is for Desktop.

- Replace the XXXXX’s for the mobile embed in the first one
- Replace the XXXXX’s for the desktop embed in the second
- You will need to replace the entire embed code on the website with the one above
- You can find the Embed ID in the URL by clicking EDIT on that embed [https://swivl.studio/settings/embed](https://swivl.studio/settings/embed)

 

Your final embed code should look like this (just make sure to replace the XXX's with the respective embed IDs)

```
<script type="text/javascript" src="https://embed.swivl.chat"></script><script>if (Swivl.isMobile()) { Swivl.embed('XXXXXXXXXX')} else { Swivl.embed('XXXXXXXXXX')}</script>
```

 

If you'd like to exclude mobile chat all-together, but include it on desktop, use the following method

```
<script type="text/javascript" src="https://embed.swivl.chat"></script><script>if (!Swivl.isMobile()) { Swivl.embed('XXXXXXXXXX')}</script>
```

 

 

- [Getting started](https://learn.tryswivl.com/getting-started?hsLang=en#main-content)

    - [For Admins](https://learn.tryswivl.com/getting-started?hsLang=en#for-admins)
    - [For Agents](https://learn.tryswivl.com/getting-started?hsLang=en#for-agents)
    - [Set Up your Bot](https://learn.tryswivl.com/getting-started?hsLang=en#set-up-your-bot)
- [Roles & Permissions](https://learn.tryswivl.com/roles-permissions?hsLang=en#main-content)

    - [Password Resets](https://learn.tryswivl.com/roles-permissions?hsLang=en#password-resets)
- [Property Manager](https://learn.tryswivl.com/property-manager?hsLang=en#main-content)

    - [Details](https://learn.tryswivl.com/property-manager?hsLang=en#details)
    - [Cortex](https://learn.tryswivl.com/property-manager?hsLang=en#cortex)
    - [Groups & Locations](https://learn.tryswivl.com/property-manager?hsLang=en#groups-locations)
- [Chatbot Setup](https://learn.tryswivl.com/chatbot-setup?hsLang=en#main-content)

    - [Installing your Bot](https://learn.tryswivl.com/chatbot-setup?hsLang=en#installing-your-bot)
    - [Advanced](https://learn.tryswivl.com/chatbot-setup?hsLang=en#advanced)
- [Escalations (Live Conversations)](https://learn.tryswivl.com/escalations-live-conversations?hsLang=en#main-content)

    - [Agent Profile & Availability](https://learn.tryswivl.com/escalations-live-conversations?hsLang=en#agent-profile-availability)
    - [Handling Live Chats](https://learn.tryswivl.com/escalations-live-conversations?hsLang=en#handling-live-chats)
    - [Notifications](https://learn.tryswivl.com/escalations-live-conversations?hsLang=en#notifications)
- [FMS Integrations](https://learn.tryswivl.com/fms-integrations?hsLang=en#main-content)

    - [Connecting your FMS](https://learn.tryswivl.com/fms-integrations?hsLang=en#connecting-your-fms)
    - [Leads](https://learn.tryswivl.com/fms-integrations?hsLang=en#leads)
- [SMS & Automated Sequences](https://learn.tryswivl.com/sms-automated-sequences?hsLang=en)
- [Troubleshooting](https://learn.tryswivl.com/troubleshooting?hsLang=en)
- [Reputation Management](https://learn.tryswivl.com/reputation-management?hsLang=en)
- [spot.is (QR codes)](https://learn.tryswivl.com/spot-is-qr-codes?hsLang=en#main-content)

    - [Payments](https://learn.tryswivl.com/spot-is-qr-codes?hsLang=en#payments)
- [Performance & Analytics](https://learn.tryswivl.com/performance-analytics?hsLang=en#main-content)

    - [Analyzing Customer Behavior](https://learn.tryswivl.com/performance-analytics?hsLang=en#analyzing-customer-behavior)
- [Connecting Apps](https://learn.tryswivl.com/connecting-apps?hsLang=en#main-content)

    - [Google](https://learn.tryswivl.com/connecting-apps?hsLang=en#google)
- [Resources](https://learn.tryswivl.com/resources?hsLang=en)
- [Notifications](https://learn.tryswivl.com/notifications?hsLang=en)
- [Contact Us](https://learn.tryswivl.com/contact-us?hsLang=en)
- [Payments](https://learn.tryswivl.com/payments?hsLang=en)
- [Voice](https://learn.tryswivl.com/voice?hsLang=en)
- [Cortex](https://learn.tryswivl.com/cortex?hsLang=en)
- [Chatbot Topics](https://learn.tryswivl.com/chatbot-topics?hsLang=en)
- [Ticketing](https://learn.tryswivl.com/ticketing?hsLang=en)

[![Chill listening crop-3](https://learn.tryswivl.com/hs-fs/hubfs/swivl_logo_dark_png.png?width=80&height=24&name=swivl_logo_dark_png.png "Chill listening crop-3")](https://swivl.studio)

swivl Support

Copyright © 2026, swivl