Adding a notification sound in Bubble
UI

Adding a notification sound in Bubble

Himanshu Sharma
Himanshu Sharma

Many sites have a soft notification sound. Say when you get a new order from a customer or a new message. You can have such notification tones in your Bubble app as well.

There is no native option provided by Bubble, but we can achieve this with a bit of JavaScript.

Setup

Install the free Toolbox plugin. This plugin will allow us to run JavaScript on button press or when there is a new entry in the database. Then upload the notification sound you want to your Bubble using File Uploader. You can create a new Data type and save it there as a File type.

You can have as many notification tones as you'd like. Just upload them to your database to get the S3 link. After the sound has been uploaded, copy the S3 file link by going to the Data tab and copying the link.

Go the workflow where you want to have the notification sound and create a new action - Run JavaScript. Copy paste this code

let src = '//s3.amazonaws.com/appforest_uf/f1598429253106x343351561325749800/apple_msg_tone.mp3';
let audio = new Audio(src);
audio.play();

Replace the S3 link of your notification sound with the text that is bold and in italics between the quotes.

Hit preview.

Honest Bubble.io Review - the most user-friendly and powerful app builder?
Bubble is an amazing platform to build your business. It’s easy to use and can be up and running in a very short time. However, there are some limitations to what Bubble can do. Get an honest review of the pros and cons of Bubble.io.

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/notification_sound

Editor - https://bubble.io/page?type=page&name=notification_sound&id=nocodeassistant-tutorials&tab=tabs-1


If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, send an email to me at [email protected] or follow me on Twitter



Join the conversation.