Adding a notification sound

UI Aug 26, 2020

Many sites have a light 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 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 that you want to your Bubble using File Uploader. You can create a new Data type and save it there as a File type.

After the sound has been uploaded, copy the S3 file link by going to the data tab and copying the link. You can have as many notification tones as you'd like. Just make sure to upload them to your database to get the S3 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 italics between the quotes.

Hit preview.

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 want a custom Bubble app, send me an email at [email protected] or follow me on Twitter

Tags