How to add a fixed footer on all slides?

Question

I have a presentation set up with reveal.js which is meant to be used unattended. So, I want to be able to show a little footer (or another link somewhere) on all slides that points to an 'Information Slide' with data about the author, how to use the slides etc.

(This is to aid people who don't really know how to use reveal.js as well as to show authorship information in detail.)

I have not been able to find anything in the documentation and there does not seem to be a callback which I can utilize.

Answer 1

This works for me (aligns to left edge as I use built-in controls on right).

Add this to your css:

.reveal .footer {
  position: absolute;
  bottom: 1em;
  left: 1em;
  font-size: 0.5em;
}

And in your html:

<div class='reveal'>
  <div class='footer'>
    Use left and right arrows to navigate
  </div>
...

If you want the footer to disappear as soon as user navigates (i.e. it should only be shown on first slide loaded because it is just a reminder), then add this to the end of your html:

<script>
  // displayed upon load, hides when slide changes
  Reveal.addEventListener('slidechanged', function(event) {
    document.querySelector('.reveal .footer').style.display = 'none';
  });
</script>

---

In order to get a fixed content in the PDF export (on all slides) you could find this answer useful.