Forum Documentation Showcase Pricing Learn more

AirDev Canvas Pages: Add fully-responsive chat and comments widgets to your pages

#1

Hi Bubblers,

After a successful launch of AirDev Canvas Pages a few weeks ago, we’re excited to share more of our assets with all of you.

Today, we’re releasing three fully-responsive widgets that we use here at AirDev every day. These widgets will come with all associated workflows so you do not need to worry about how to set them up.

Chat widget - View multiple threads and message each user individually

This chat widget comes in two formats:

  1. Stretch–to-fit iMessage format

  2. Slack format

You can select the format you want by going into the chat-messages reusable element and hiding/unhiding Group M-Slack or Group M-iMessage

Comments widget - Simple comments widget for group discussions

Nested comments widget - Includes advanced features such as liking a comment and replying to a comment thread

They are all available at AirDev Canvas - Once you’ve signed up for an account > go ahead and create a copy of our Canvas App for free > create pages for that app

Thank you again for all your support!

Stephanie
AirDev

8 Likes

AirDev Canvas App v1.3
Slideable Dashboard Menu
#2

Hi Bubblers,

We’ve just released a 2 column form inputs group for AirDev Canvas Pages. This group is fully-responsive on mobile and is ideal for any app that would need a simple form to collect data.

Desktop view:

Mobile view:
29%20PM

Enjoy!

Stephanie
AirDev

1 Like

#3

Thanks guys for sharing this, great help for the community.

1 Like

#4

Hi Bubblers,

We’ve received a lot of great feedback on the chat widget. As a result, we’ve updated the style and format of the chat bubbles:

  • Added a gradient to the chat bubbles
  • Changed “from-me” font color to white
  • Added more line spacing
  • Removed the caret (shape element) and added more roundness to the chat bubble

Enjoy!

Desktop view:

Mobile view:

How to get this chat module:

  1. Go to the Bubble Template Marketplace and download our free Canvas: App Foundation template
  2. Sign up for an account at AirDev Canvas
  3. Go to your Bubble dashboard and click on NEW APP
  4. When prompted, enter the name of your app and select “Canvas: App Foundation” from the template dropdown
  5. To add custom modules to your app with Canvas Pages, go to the Bubble Editor > Settings Tab > Collaboration Tab > and add dev@airdev.co as a collaborator to your app.
  6. Return to AirDev Canvas and you will see that your app has been registered with AirDev Canvas. You can view all of your registered apps under “MY APPS” tab. From there you can click into an app and customize your app color or add modules / pages to your app.

0241d0f4f88ad8977cdaa5d8127d8d6e492d8935_1_690x358

ca592d97575f7f00946cc5092f1cb96e9d31e48a_1_611x499

Enjoy!

Best,
Stephanie
AirDev

2 Likes

#5

Hi @stephanie,

Is there anyway of getting this chat feature onto my app without using the canva template? Please let me know cheers.

0 Likes

#6

Hi @accommole ,

I would recommend getting the chat widget with our free Canvas Template first because the chat widget will use database objects and styles from Canvas. After adding it to an app built with Canvas, you can move it to another app but would need to update the style and database references.

Hope this helps!

Best,
Stephanie
AirDev

2 Likes

#7

how would we update the style in our own apps using your widget? this looks fantastic by the way

0 Likes

#8

Hi @techninjoe,
If you are using our Canvas Template, you can register your app with our Canvas Portal by adding dev@airdev.co as a collaborator. Once your app appears under MY APPS, you should click on VIEW DETAILS and select UPDATE APP COLORS. Our automated tool with update all the Canvas Styles in your app (if you used one of our templates) for you without you needing to lift a finger :slight_smile:

0 Likes

#9

Hi , when you say “After adding it to an app built with Canvas, you can move it to another app but would need to update the style and database references.” why did i think when i add pages/with blocks on airdev canvas it says i cannot copy and paste to other apps? im confused. while honestly im using the stuff in the same app but few different development versions only ( not exactly some totally different app ). Lastly i cannot find any tutorial how to get the message chat work and cannot find any tutorial to get the nested comments work either. Pls point me to any further tutorials pls??? I only saw the text simple instructions relating to these two functions but reading it multiple times I have zero idea how to get it work. very frustrating. More frustrating than watching other online video tutorials starting from scratch. I thought the airdev canvas blocks are supposed to make things easier for non techs.

0 Likes

#10

Hi @jojojemma,

when you say “After adding it to an app built with Canvas, you can move it to another app but would need to update the style and database references.” why did i think when i add pages/with blocks on airdev canvas it says i cannot copy and paste to other apps? im confused.

accommole was wondering if he would be able to use the chat widget in his app without using the Canvas template. We recommended using the Canvas template to add the chat widget first because the chat widget uses database objects and styles from the Canvas template. He could then copy the chat widget to any other app that he wants to add the chat widget to but would need to update the style and hook up the workflows to the new app.

Our Canvas terms state that:

  • You are not allowed to re-sell either original or modified assets that you obtain through Canvas Pages (for example., selling it as a template)

  • You are allowed to use anything that you obtain through Canvas Pages for a personal or commercial Bubble application

Hope that makes sense!

Last but not least, thank you for your feedback on the module documentation. This is something that is definitely on our radar and what we’re currently working on to improve. We will follow up with you shortly to provide you with detailed instructions on how to set up the nested comments and chat modules in you app!

Best,
Stephanie

0 Likes

#11

Hello, thanks! I got a reply from support too about the misunderstanding of “ copying blocks to other apps” . Indeed I haven’t been able to figure how to use those blocks for last few days :roll_eyes: and especially when no clear directions given for some blocks, so I hope some text instructions of step by step would be really be useful for the future :pleading_face::pleading_face::pleading_face::pray:t2: I do not know who uses Bubble but i had vast experience in web and building many cms / php but im super struggling when using the airdev canvas blocks. Pl update instructions soon :sob::sob::pray:t2::sob::sob:

0 Likes