Get off the canvas login system and home page

Hello !

I’m a new user of the canvas, and I think it would easier for me to get completely off its login/sign in sytem. I wanna replace it by a classical popup, which I did, but I got the feeling the canvas system is everywhere. How could i do that ? :slight_smile:
Probably related question: When clicking on header links, I’d like the login popup to appear if the user is logged off… can’t find how :-/

Secondly, same question for the home page.
I’d like to build my own home page, but can’t find how…

If someone has the question :-)))

1 Like

Hey @johann.ouaki :slight_smile: Welcome to the Canvas forum! Thank you so much for your message, glad to provide more information here!

Using the Signup/Login reusable element
The Canvas template includes this “signup/login” reusable element which is located on the “login” page by default. This reusable can be added into a popup directly within the header reusable element in this way:

Signup/login reusable element

Example of the signup/login reusable element within a popup

Editing the Header Menu Links
Canvas automatically generates the header links using an HTML element, which is all controlled in the admin portal:

The main benefits to this approach are:

  • The navigation elements can be edited quickly in the admin portal without needing to push your app to live after a change is made
  • Everything is responsive at all times

Triggering Bubble actions from the header menu links
It is possible to trigger different Bubble actions (such as showing the Signup/Login element popup) when a header link is clicked, but it would require this modification:

Hide the auto-generated HTML links (the “HTML header” element), and add text elements inside of the “Group Desktop Menu Items” element instead.

HTML header" element (set this to not be visible on page load)

Group Desktop Menu Items (text and link elements can be added here)

Editing the homepage
By default, a Canvas app’s homepage is generated dynamically through HTML, and edited through the Canvas Page Maker here:

Similar to the header links setup, the main benefits to this approach are:

  • The design can be changed quickly without needing to push changes from dev to live
  • Everything is responsive at all times
  • The page can load faster compared to pages of comparable size with similar designs that are built manually

If you’d prefer to build the page with custom elements instead, this can be done by adding any page template through the Chrome extension, adding blocks (or any custom Bubble elements), and setting that page to be the new index:

Then, copy and paste the green workflows from the now “old_index” page to the new “index” page (if you anticipate still needing any of those redirect actions)

That should do it, but feel free to let me know if not or if I can clarify anything! :slight_smile:


Thx for your reply!
I think I ‘destroyed’ too many things :sweat_smile:
I got a paid plan, do you know how I could the pages I’ve built and get back to the original base canvas set up ???

My pleasure! :slight_smile: And ah, got it! Unfortunately, there is not a quick way to revert some parts of the template, while keeping other parts of the app, but one of these two options should get us most of the way there!

Option 1: Make a copy of the main app, revert the main app back to its original state, and then re-add the pages you built previously from the copied app into your main app

  1. Make a copy of the app as it is now
  2. Revert the original app to a date/time before parts of the base template were deleted
  3. Re-create the new pages into the app again by copying/pasting them from the copied app

*I would only recommend this approach if the new pages are somewhat easy to copy/paste and/or re-build the data structure

Option 2: Make a new app with Canvas, and copy any of the broken base functionality into your existing app as you continue to develop the main app

  1. Create a new app with the Canvas Base Template
  2. Each time you come across something that was deleted/broken in your main app, copy/paste any functionality from the other new Canvas app into the original, main app

Note: Copying/pasting from one app to another can bring up errors (which can be fixed) at times but this may be the most straightforward approach to ensure that you can keep the pages you’ve already built. I would only recommend this approach if it would be more time-consuming to copy/paste and/or re-build the new pages that you created in your main app, compared to this approach.

Please don’t hesitate to let me know if you have any questions about either option! Thanks again, @johann.ouaki!

Thx again !! :slight_smile:

And finally, do you know how I can keep my paid plan if i start from a new app and copy the pages I built from the original app ?

No problem at all! Absolutely!

Just to confirm, are you referring to keeping the Canvas premium license, and/or keeping your paid Bubble plan? If your app is on the Hobby plan, and you are looking to transfer the Canvas premium license from one app to a different app, we would need to manually move the premium license from your original app to the new app. Please feel free to private message me the original app’s id and the new app’s id (after it’s setup through the admin portal) and I can definitely transfer that! :slight_smile:

To be honest I’m about to give up. I’ve bought the bubble business plan to be able to get back to the original canvas set up but it only allows to go back to 7 days in time. I’ve bought the premium canvas plan, to use 2 features I needed, but it’s so HARDDDD to understand your system and how to customize it, that I lost motivation and the energy I had when working on regular Bubble tools… I just spent two hours to copy/past all elements of login/sign up from a new app (+150errors which I solved one on one) and now just tried to put the login i a popup, but I’m not logged in, the original page still appears… seriously, Canvas looks great, but it’s impossible to use if not trained by the company… :frowning:

Ah, got it! So sorry to hear it has been frustrating and time-consuming, @johann.ouaki. I absolutely want to try to make this easier, and don’t want you to have to fix that many errors of course! :slightly_frowning_face:

Would it be helpful if I hopped into the original app and reverted it back to the original template state? If so, can you please temporarily set your app to public and a link to the editor, by going to Settings → General → Applicatoin Rights: Everyone can edit? (Feel free to PM me this link if you prefer!)

I’ve sent the link in pm, If you can revert to the original template state yes, maybe this time i’ll understand how it works :sweat_smile: :thinking:

Thank you so much, @johann.ouaki! Just answered! :slight_smile: