Skip to main content

HTML DOM Client

For simple websites, we've prepared a simple JavaScript library that reduces overhead of implementing details and expose easy to use HTML5 API based on custom attributes or classes.

With this library, you don't have to worry about managing session, cookies or displaying proper button / elements based on current authentication state.

warning

This library works only for classic static websites (like WordPress) that are rendered on server side. For JavaScript applications, you need to use API directly.

Installation​

You can install library through package manager of your choice or load directly from CDN. Go to https://www.npmjs.com/package/mimeeq-auth-html-client for more installation details.

note

You still need to generate and add authentication embed code for you site to enable core functionality. You can do this in your Admin Panel under Settings -> Login Code.

Login Button​

Using HTML attribute:

<button mimeeq-login>Log in</button>

Using class name:

<button class="mimeeq-login">Log in</button>

Logout Button​

Using HTML attribute:

<button mimeeq-logout>Log out</button>

Using class name:

<button class="mimeeq-logout">Log out</button>

Profile Button​

Using HTML attribute:

<button mimeeq-profile>My profile</button>

Using class name:

<button class="mimeeq-profile">My profile</button>

Modular Configurator Button​

Sometimes, you might need a button that opens the modular configurator on clicking it. Of course, you can do this directly via our API or using this example, but we've also made it easier for you:

Using custom attribute:

<button mimeeq-configurator-button>Open configurator</button>

Using class name:

<button class="mimeeq-configurator-button">Open configurator</button>
note

You need to have embed code for your configurator added to your website. This code can be generated in Admin Panel.

Authentication URL​

If you would like to have direct authentication URL that opens login modal automatically, use following:

https://your-domain.com/?auth=mimeeq

Configurator URL​

This library automatically exposes shareable configurator URLs when you're accessing URL generated by modular configurator modal.

Session Management​

This library takes care of entire session management for you. To hide or display DOM elements based on user authentication state, use following:

  • DOM elements hidden from guests:
    • Data Attribute: [mimeeq-auth-off]
    • Class Name: .mimeeq-auth-off
  • DOM elements hidden from logged in users:
    • Data Attribute: [mimeeq-auth-on]
    • Class Name: .mimeeq-auth-on

The display of login, logout and profile buttons is working out of the box, without any extra actioning required.

Caveats​

To avoid CSS flickering issue caused by JavaScript working asynchronously, you might need to consider some extra custom CSS in the <head> section of your site.

<style>
    <?php if($_COOKIE['mimeeq-auth']): ?>
    [mimeeq-login] { display: none !important; }
    <?php else: ?>
    [mimeeq-logout] { display: none !important; }
    <?php endif ?>
</style>