Making use of custom Javascript code in Alia

Custom Javascript code is currently supported in various places throughout Alia's platform.

Custom code element

You can add a "Custom code" element to your popup, where you can insert any HTML/CSS/JS code, as you normally would in an HTML file. For example, here's code that you could insert that would alert when a button is clicked:

<button id="myButton">Click Me</button>

<style>
  #myButton {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  #myButton:hover {
    background-color: #45a049;
  }
</style>

<script>
  document.getElementById('myButton').onclick = function () {
    alert('Button was clicked!');
  };
</script>

You can make use of the $alia object from within custom code to reference user data, go to a step, close the popup, and more.

Text element

You can insert arbitrary Javascript expressions inside text elements. For example, if your text element has the following:

Welcome, {{ $alia.user.name }}

It would show "Welcome, Bob", if the user had already entered the name Bob into a name input field.

You can also include pre-defined text variables, such as:

discount_code
discount_expiration (a countdown timer for when the discount will expire)
sms_consent (recommended, compliant SMS consent text)

You can also insert an arbitrary countdown using the countdown function. For example, to insert a 15 second countdown:

{{ countdown({ secs: 15 }) }}

Popup actions

Besides normal actions like "Go to step" or "Close popup", you can define a "Custom code" action that executes arbitrary Javascript. You also have access to the $alia object here, which enables powerful workflows like going to a specific step based on which answer a user selected for a question (by using the $alia object).

Targeting

You can use custom code within targeting settings to target or suppress specific user segments that can only be determined with Javascript. Simply create a "Custom code" targeting setting and enter a Javascript snippet that returns a boolean. If it returns false, the campaign won't show for that user.

Using the $alia object in custom code

Using text variables in Alia