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 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
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>