Toggle Side Panel
Close search
View Categories

Embedding Customization

4 min read

These settings enable you to change the appearance of Cyclr when viewed externally through Cyclr’s various embedding options, such as LAUNCH and Marketplaces, as well as the Account User Inferface as viewed by Account Users.

Note: Changes you make in the areas below may take around 1 minute to update in the interface due to caching.

Application LESS Variables #

The simplest way to alter the appearance of Cyclr is to change the values of the CSS Leaner Style Sheets (or “LESS”) variables.

For example if the body-background is set to #ccc then the background of Cyclr will change to gray.

@body-background: #ccc;

Application Custom CSS #

If changing the LESS variables is insufficient to provide the customization that you require, you can also include your own custom CSS content. This will be included alongside the Application LESS content so you can use both as required.

For example to change the rounded buttons within Cyclr’s inteface to have square corners, you could use the following:

.btn-rounded {
    border-radius: 0;
}

Header HTML #

Header HTML allows HTML and JavaScript to be used in the page headers.

<h1>This is a header</h1>

Footer HTML #

Footer HTML allows HTML and JavaScript to be used in the page footers.

<h1>This is a footer</h1>

Launch Complete HTML #

Launch Complete HTML allows for the changing of HTML and JavaScript that is displayed at the end of the install process for LAUNCH and Marketplace.

For more information, see Handling Launch Callback.

Connector Callback Error HTML #

Connector Callback Error HTML allows you to change the HTML content displayed when an error occurs when authenticating a Connector.

The error and error description returned by an external system when authentication fails can be used within the HTML by including the {{error}} and {{error_description}} merge fields.

For example:

<p>The following error has occurred: {{error}} - {{error_description}}</p>

Access Messages #

Cyclr lets you customize and define the content of the emails sent to Account Users for key events, such as two-factor authentication when signing in, resetting passwords or being invited into an Account.

To customize those emails, sign in to your Partner Console and go to Settings > Embedding Customization. 

At the bottom of the page, you will find three sections where you can customize the body content of the emails Cyclr sends for the following events:

  • 2FA Email
    • 2FA emails are sent when an Account User needs a verification code as part of signing in.
  • Password Reset Email
    • Sent when an Account User requests a password reset.
  • Account Invite Email

All Access Messages are sent from help@cyclr.com. 

If no custom email body is configured for a given scope, Cyclr sends the default Cyclr email. This preserves existing behaviour if you do not choose to customize emails.

Warning: Customizing Access Emails is optional. If you add customization, you are responsible for the content and presentation. Test your emails across the email clients your users rely on and confirm required placeholders and links work as expected.

Note: The customization for access emails supports HTML and CSS. You can provide a full HTML document for each email. We recommend keeping the messages short and simple to reduce the risk of spam filtering and to improve rendering consistency across email clients.

Access Messages for Private Instance Partners #

If you have a private Cyclr Instance and you have access to its Primary Console, on top of the customizable email bodies mentioned above, you’ll also have the option to customize Console Invites. These are sent when a Console User is invited to your Console.

Note: On the Primary Console, the customization that you apply to the 2FA and Password reset emails will also affect how they look to Console Users. 

  • 2FA Email Body
    • used by all Console Users on that Instance
    • used by all Account Users in that Console
  • Password Reset Email Body
    • used by all Console Users on that Instance
    • used by all Account Users in that Console
  • Console Invite Email Body
    • used by all Console Users on that Instance
  • Account Invite Email Body
    • used by all Account Users in that Console

Required placeholders #

Custom email bodies must include placeholders so Cyclr can insert the required code or link at send time.

Placeholders use curly braces with a zero: {0}

This placeholder is required in all customizable templates, and Cyclr replaces it depending on the email type:

  • 2FA email: {0} is replaced with a verification code
  • Password reset email: {0} is replaced with a password reset link
  • Account and Console invite email: {0} is replaced with an invite link

Implementation note for password reset and invites:

  • For these emails, the {0} placeholder will be replaced by a link so typically you would set that as the “href” attribute of an HTML link or “<a> tag”.

For example:

<a href="{0}" target="_blank" style="display:inline-block;background:#123456;color:#ffffff;text-decoration:none;padding:12px 18px;border-radius:8px;font-weight:700;">Get Access</a>


If the placeholder {0} is missing from your CSS/HTML code and you attempt to save your settings, Cyclr will give an error message warning you about the missing placeholder.

Optional placeholder for invites #

For the Account Invite emails, you can also include the email address of the user sending the invitation by using another placeholder. Cyclr replaces this with the email address of the person who sent the invite.

The placeholder that you can use for this is: {inviterEmail}

Note that this placeholder is case sensitive, and can appear zero or more times in the copy. Since this place holder is optional, Cyclr will not give an error if it is missing from the email body.

For example: 

<p>You've been invited to use Account by {inviterEmail}.</p>

Example emails #

2FA 
<!doctype html>

<html lang="en">

  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Two-Factor Authentication Email</title>

  </head>

<body>

  <img src="https://picsum.photos/200" width="100" alt="">

  <p>Here’s your one-time verification code. Do not share this code with anyone.</p>

  <div style="display:inline-block;background:#123456;color:#ffffff;text-decoration:none;padding:12px 18px;border-radius:8px;font-weight:700;">

    {0}

  </div>

  <p>The code remains valid for 5 minutes.</p>

<p>THIS IS AN AUTOMATED MESSAGE</p>

</body>

</html>
Password Reset 
<!doctype html>

<html lang="en">

  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Password Reset Email</title>

  </head>

<body>

  <img src="https://picsum.photos/200" width="100" alt="">

  <p>We received a request to reset your password.</p>

  <a href="{0}" target="_blank"

style="display:inline-block;background:#123456;color:#ffffff;text-decoration:none;padding:12px 18px;border-radius:8px;font-weight:700;">

    Reset Password

  </a>

  <p>This link is valid for 24 hours.</p>

<p>THIS IS AN AUTOMATED MESSAGE</p>

</body>

</html>
Account Invite 
<!doctype html>

<html lang="en">

  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Invite Email</title>

  </head>

<body>

  <img src="https://picsum.photos/200" width="100" alt="">

  <p>You've been invited to use Account by {inviterEmail}.</p>

  <p>To gain access, click the link below.</p>

  <a href="{0}" target="_blank" style="display:inline-block;background:#123456;color:#ffffff;text-decoration:none;padding:12px 18px;border-radius:8px;font-weight:700;">

    Get Access

  </a>

<p>THIS IS AN AUTOMATED MESSAGE</p>

</body>

</html>
Console Invite 
<!doctype html>

<html lang="en">

  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Cyclr Invite Email</title>

  </head>

<body>

  <img src="https://picsum.photos/200" width="100" alt="">

  <p>You've been invited to use Cyclr by {inviterEmail}.</p>

  <p>To gain access to the Cyclr Console, click below.</p>

  <a href="{0}" target="_blank"

     style="display:inline-block;background:#123456;color:#ffffff;text-decoration:none;padding:12px 18px;border-radius:8px;font-weight:700;">

    Get Access

  </a>

  <p>THIS IS AN AUTOMATED MESSAGE</p>

</body>

</html>