How to Add a Floating Back Button in Discourse (For Mobile Users)

Dev
1

I see there have been topics about having mobile back button navigation for mobile browsers and I didn’t find solution though maybe I missed it :thinking:

I’m not a coder and proficient enough with Discourse to dangerous :wink: but I did fumble through with ChatGPT to make the working BLUE colored back button in this image with my pup.

The image shows a small white dog with a blue collar on a wooden floor in a home setting. (Captioned by AI)
The image shows a small white dog with a blue collar on a wooden floor in a home setting. (Captioned by AI)1080×2340 168 KB

I want to hide on specific pages but haven’t figured out how to hide elements yet. If anyone knows I will adjust and add to instructions.

How to Add a Floating Back Button in Discourse (For Mobile Users)

This guide helps you add a floating “Back” button for mobile devices in your Discourse forum. It ensures the button appears only for mobile users and improves navigation for apps or browsers lacking built-in back buttons.

Step 1: Create a New Theme Component

  1. Log in as Admin:
  • Go to your Discourse forum and log in with an admin account.
  1. Access Theme Customization:
  • Navigate to Admin > Customize > Themes.
  1. Create a Theme Component:
  • Click Components.
  • Click Install > Create New.
  • Name the component “Mobile Back Button” and click Create.

Step 2: Add the Back Button Code

  1. Edit the Theme Component:
  • Click on the newly created theme component.
  • Go to the CSS/HTML section.
  1. Add JavaScript for the Back Button:
  • Switch to the Mobile tab.
  • Click on the </head> section.
  • Paste the following code:

html

Copy code

<script type="text/discourse-plugin" version="0.8">
  function addMobileBackButton() {
    const isMobileView = api.container.lookup('site:main').mobileView;
    if (isMobileView) {
      const existingButton = document.querySelector('.floating-back-button');
      if (!existingButton) {
        const backButton = document.createElement('button');
        backButton.className = 'floating-back-button';
        backButton.innerHTML = '&#8592;'; // Unicode for left arrow
        backButton.onclick = (event) => {
          event.preventDefault();
          window.history.back();
        };
        document.body.appendChild(backButton);
      }
    }
  }

  // Add the button on initial page load
  document.addEventListener('DOMContentLoaded', addMobileBackButton);

  // Re-check on subsequent page transitions
  api.onPageChange(addMobileBackButton);
</script>

Step 3: Add CSS for Styling

  1. Add the Back Button Styles:
  • In the Mobile tab, click on the CSS section.
  • Paste the following CSS:

css

Copy code

.floating-back-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #0088cc; /* Customize the color */
  color: #fff;
  border: none;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  cursor: pointer;
}

Step 4: Apply the Theme Component

  1. Go Back to Themes:
  • Navigate back to Admin > Customize > Themes.
  1. Edit Your Active Theme:
  • Click on your active theme.
  • Under Theme Components, add the “Mobile Back Button” component from the dropdown.
  • Click Add and then Save.

Step 5: Test Your Changes

  1. Open Your Forum on Mobile:
  • Use a mobile browser or simulate mobile view using developer tools.
  1. Verify the Back Button:
  • The button should appear in the bottom-left corner of the screen.
  • Clicking the button should navigate you back in your browser history.

Notes:

  • For Mobile Only: Since the code and CSS are in the Mobile tab, the button will only appear on mobile devices.
  • Customization:
    • You can adjust the button’s position, size, or color in the CSS to match your forum’s design.
  • Functionality:
    • The back button uses window.history.back(). If there’s no previous page, it won’t navigate anywhere.
2

I don’t know, but there is no need for back button, because swiping works just fine.

2 Likes
3

Maybe I have something wrong with my install but I was not able to swipe consistently. Still learning my way around Discourse.

4

For Chrome, you can swipe from the left edge to go back.
On browsers, my phone’s back button also works. Does it work for you?
IIRC you can use api.onPageChange() and then get the page url.
See:

5

@Jagster so I have discovered a couple of things that had affected my lack of understanding of the swiping gestures existence.

On my iPhone swiping works great. I have two Android phones with Chrome. One swipes fine the other almost impossible to swipe. On Android if I install the PWA that seem seems to stop swiping working all together. The phones are all newish from 1 to 3 years old.

Not sure if this has been experienced by others?

6

@NateDhaliwal thanks! I just posted about what my experience has been with iPhone/Android which is inconsistent by device and not working on PWA.

7

It does. And on Android you can even swipe back to the list of forums on the Hub App which is very cool.

8

So do all i-devices, but who’s counting :joy:

But for that why gestures fails for some I don’t have any explanations. But all my users are using swiping all the time without complains :man_shrugging: