Theme Architecture

Discover the structure of a theme page. The role of each template and how content is displayed around the Cryptr widget

An organization's theme has two files type, a liquid file for authentication screen and a mjml file for email screen.

The liquid (or mjml) file contain html code and a style tag for css. The content is displayed through variables placed in the html code tags.

To learn more about how to set up these variables, edit them and what can be edited, see the liquid guide or mjml guide.

note

If you create your own theme, you can write your own html and css code around the widget. As far as the widget is concerned, it has been designed to have very few tags and no classes in order to use simple selectors so you can apply to it the css you want.

Liquid Content

Liquid theme files fall into the following categories:

Liquid: These files control the layout and functionality of a theme. They use Liquid language to generate the HTML markup that makes up the design of the template.
Style: This is a <style> HTML element that is used by the template to customize the theme, it contains CSS.
Variables: These variables are used to store data that can be customized, such as text or images.

Here is an example of a login page, each page is designed in the same way:

Liquid template

<div>
  <style>/* Your CSS Style */</style>
  <div>
    <div class="wrapper">
      <!-- Image -->
      <div class="image-wrapper">
        <img class="cover-image" src="{{ site.background_url }}" alt="{{ site.background_alt_text }}"/>
      </div>
      <div class="content">
        <div class="card">
          <div class="card-content">
            <div class="avatar-background">
              <img src="{{ site.picture_url }}" class="avatar" alt="{{ site.picture_alt_text }}">   
            </div>
            <div class="group-text">
              <h1>
                {{ site.title }}
              </h1>
              {% if site.description != nil %}
                <p>
                  {{ site.description }}
                </p>
              {% endif %}
            </div>
          </div>
          <!-- Widget -->
          {{cryptr:widget}}
          <a href="{{ site.company_url }}" target="_blank">
            <img class="logo" src="{{ site.logo_url }}" alt="{{ site.logo_alt_text }}">
          </a>
        </div>
        <a class="badge" href="https://www.cryptr.co/" target="_blank">
          <img class="cryptr-badge" src="https://res.cloudinary.com/cryptr/image/upload/v1669976239/Cryptr%20badge/badge_protected_by_cryptr_color_gwulm0.svg">
        </a>
      </div>
    </div>
  </div>
</div>

note

To know more about liquid, we advise you to read the documentation:
https://liquidjs.com/tutorials/intro-to-liquid.html

Assets

You have to add the widget variable to display the component form. This component is not editable but can be customized with your own css, and the contents of the variables can be edited.

Store the CSS and JavaScript of the theme in the <style> and <script> tags. And place them directly in your liquid file.

Also, you can translate your theme into different languages.

info

Each theme contains an html folder with several .liquid and an email folder with several .mjml files

Email Content

You can customize the emails and see how they appear to the recipients before they are sent.

For this you will need to provide a mjml template with variables. These variables can be place as you wish in your template.

Here is the list of email templates you have in your authentication

The fallback content to display on prerendering

Magic link
Password Reset
SSO Onboarding

Markup

Here is an example of a email page, each page is designed in the same way:

Email template

<mjml>
  <mj-head>
    <mj-title>Je me connecte sur Kamaé</mj-title>
    <mj-preview>...</mj-preview>
    <mj-attributes>
      <mj-all font-family="'Ubuntu', Helvetica, Arial, sans-serif"></mj-all>
      <mj-text font-weight="400" font-size="14px" color="#000000" line-height="24px" font-family="'Ubuntu', Helvetica, Arial, sans-serif"></mj-text>
    </mj-attributes>
    <mj-style inline="inline">
      <!-- Your CSS Style -->
    </mj-style>
  </mj-head>
  <mj-body background-color="#FFFFFF" width="400px">
    <mj-section full-width="full-width" background-url="https://res.cloudinary.com/cryptr/image/upload/v1669818114/Glitch/background_login_top_sx1q7u.png" background-size="cover" padding-bottom="0">
      <mj-column width="100%">
        <mj-image css-class="header" src="https://res.cloudinary.com/cryptr/image/upload/v1673979670/Glitch/kamae_magic_link_header_lwcnuh.png" width="600px" alt="" padding="0" />
      </mj-column>
    </mj-section>
    <mj-wrapper padding-top="0" padding-bottom="0" css-class="body-section">
      <mj-section background-color="#F8FAFC" padding-left="15px" padding-right="15px">
        <mj-column width="100%">
          <mj-text color="#9EA4AF" font-size="14px" line-height="16px">
            Cliquez sur le bouton de connexion ci-dessous pour vous authentifier avec sécurité, 
            via <strong>{{user_email}}</strong>
          </mj-text>
          <mj-button href="{{magic_link_url}}" background-color="#6F51EC" align="center" color="#ffffff" font-size="15px" font-weight="bold" width="300px" padding-bottom="0">
            Me connecter
          </mj-button>
          <mj-text align="center" color="#9EA4AF" font-size="11px" padding-top="0" padding-bottom="0">
            Cette demande d’authentification expirera dans <strong>{{expiration_time}}</strong>
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section background-color="#F8FAFC" padding-top="0" padding-left="30px" padding-right="30px" padding-bottom="0">
        <mj-column background-color="#FFFFFF" padding-top="16px" padding-bottom="16px">
          <mj-text font-size="11px" color="#9EA4AF" line-height="12px">
            Cette connexion a été émise depuis 
            <strong title="browser">{{user_agent_family}} ({{user_agent_version_major}}.{{user_agent_version_minor}})</strong> sur 
            <strong title="device">{{user_agent_os_family}} ({{user_agent_os_version_major}}.{{user_agent_os_version_minor}})</strong> à 
            <strong title="time">{{time}}</strong>
            le <strong title="date">{{date}}</strong>
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section background-color="#F8FAFC">
        <mj-column>
          <mj-image height="44px" width="100px" src="https://res.cloudinary.com/cryptr/image/upload/v1669818071/Glitch/kamae_logo_cviddz.png" alt="" href="https://kamae.fr/"/>
        </mj-column>
      </mj-section>
    </mj-wrapper>

    <mj-wrapper full-width="full-width" padding-top="0">
      <mj-section>
        <mj-column width="100%" padding="0">
          <mj-text css-class="link-to-copy" color="#9EA4AF" font-size="14px" line-height="16px" padding-top="0">
            Ou copier-coller le lien ci-dessous dans votre navigateur:
            <a href="{{magic_link_url}}" target="_blank" class="link">{{magic_link_url}}</a>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

note

To know more about mjml, we advise you to read the documentation:
https://documentation.mjml.io/

The default css theme template is automatically generated but you can upload your own css file to match your brand identity.

Liquid Content​

Global markup and widget​

Assets​

Email Content​

Markup​

Liquid Content

Global markup and widget

Assets

Email Content

Markup