Docs menu

Customise the sign-in button

Every page with the Disfora script gets a sign-in button in the bottom corner. Readers sign in with it, and once they have, it opens their notifications and a logout link. You can move it, hide it, put it in your own header, or build your own buttons from the reader's sign-in state.

These are the real buttons, on this page. Sign in to see the logout button appear:

The floating button

Signed-out readers see Sign in. Signed-in readers see their avatar with an unread count, and clicking it opens their notifications for your site, a link to all their notifications, and Logout. Change it with attributes on the script tag:

<script src="https://disfora.com/public/disfora.js" async
        data-floating-button="false"
        data-position="bottom-left"></script>

Attribute on the script tag	Does
`data-floating-button="false"`	Hides the floating button. Readers who try to comment, rate or vote while signed out still get the Sign in to continue prompt.
`data-position="bottom-left"`	Moves it to the bottom-left corner. The default is `bottom-right`.

If you hide the floating button, put one in your header instead, so signed-in readers can still see their notifications and log out.

Put the button in your header

Put this where the button should appear, for example next to your site's menu:

<div data-disfora-auth></div>

It's the same button: Sign in, then the avatar and notifications. The menu opens below it, or as a sheet from the bottom of the screen on phones. It uses your project's styles and follows your site's light or dark mode, like the rest of the widget. Use it with data-floating-button="false", or alongside the floating button.

Add a logout button

<div data-disfora-logout></div>

This shows the Logout button from the notifications menu while a reader is signed in, and nothing while they're signed out.

Read the sign-in state

Your page gets a disfora:auth event on window once Disfora knows whether the reader is signed in, and again each time they sign in or log out. event.detail.user is the reader, or null when nobody is signed in:

window.addEventListener('disfora:auth', (event) => {
  const user = event.detail.user;
  // { username: "sam", first_name: "Sam", last_name: "Lee" }, or null
});

The reader's username, first name and last name are all your page gets: never their email address. For example, to hide your own Join link from readers who are signed in:

<a href="https://yoursite.com/join" id="join">Join</a>
<script>
  window.addEventListener('disfora:auth', (event) => {
    document.getElementById('join').hidden = Boolean(event.detail.user);
  });
</script>

Code that runs after Disfora has loaded, like a component that appears after a page change, may have missed the event. Read the current reader first, then listen: window.disfora?.auth?.getUser() returns the reader, or null.

Use your own buttons

To use buttons that match your site instead of ours, call these from your own code:

Call	Does
`disfora.auth.ensureAuth()`	Opens the Sign in to continue prompt for a signed-out reader. Returns a promise of the reader once they've signed in, which fails if they close the prompt.
`disfora.auth.logout()`	Logs the reader out. Returns a promise that resolves once it's done.
`disfora.auth.isAuthenticated()`	`true` while a reader is signed in.

<button onclick="window.disfora?.auth?.logout()">Log out</button>

Disfora's own buttons, menu and the disfora:auth event update whichever way the reader signs in or out. window.disfora.auth is there once the script has loaded, which is always before the first disfora:auth event.

Ask a question

Something missing or unclear? Ask here and we'll answer in the thread.

Updated October 2026