Angular module to manage terms, policies and Smartlook integration.

Usage no npm install needed!

<script type="module">
  import adiaTechnologyPoliciesConsentWidget from 'https://cdn.skypack.dev/@adia-technology/policies-consent-widget';



Set of reusable components to compose customizable policy consent Angular modal. This library was generated with Angular CLI version 7.3.10.

Getting started


Npm installation:

npm install @adia-technology/policies-consent-widget --save

Usage & example

In order to customize the looks of a modal prepare property of type Theme and specify colors.

  theme: Theme = 

Add third party scss imports to your global styling scss.

@import '~ngx-smart-modal/ngx-smart-modal';
@import '~ngx-ui-switch/ui-switch.component.scss';

Basic example

<app-consent-modal [theme]="theme" [identifier]="your-modal-identifier">
  Put a content here e.g. html.
  <app-consent-switch [theme]="theme" (switchToggled)="setSwitch($event)"></app-consent-switch>
  <app-consent-button [theme]="theme" [innerText]="'Confirm'" (onClick)="confirmConsent()"></app-consent-button>

Example with markdown rendering within modal. This was accomplished by utilizing *ngIf=...; else ... and <ng-template #...>, thus the reason to supply below flags and events. You have to provide markdown string to app-markdown-to-html component via [markdownContent] binding. Provide flag for showing and hiding navigation back arrow, which is hidden by default. Inform app-consent-modal via [confirmedConsent] that consent is confirmed and modal can be closed. Toggle modal view when navigating back from rendered markdown by listening (onNavigateBack) event.

  <div *ngIf="!showMarkdown; else markdown">
    <h1>{{ primaryHeader }}</h1>
    <h2>{{ secondaryHeader }}</h2>
    <h3>{{ tertiaryHeader }}</h3>
    <div>{{ subheaderPart1 }} 
      <a (click)="renderMarkdown()"> {{ subheaderPart2 }}</a>
  <app-consent-switch [theme]="theme" (switchToggled)="setSwitch($event)"></app-consent-switch>
  <app-consent-button [theme]="theme" [innerText]="'Confirm'" (onClick)="confirmedConsent()"></app-consent-button>
  <ng-template #markdown>
    <app-markdown-to-html [theme]="theme" [markdownContent]="markdown"></app-markdown-to-html>


You need to call forRoot method on import in app.module like this:

import { ConsentModule, ConsentModuleConfig } from '@adia-technology/policies-consent-widget';

PoliciesConsentConfig: ConsentModuleConfig = {
  markdownBaseUrl: 'https://yur.domain.com/documents/',
  cookieName: 'smartlook-consent',
  countrySuffix: '-EN/',
  markdownNames: {
    SmartlookConsent: 'smartlook-info.md',
    TermsOfUse: 'platform-terms-of-use.md',
    PrivacyPolicy: 'platform-privacy-policy.md'

    imports: [

You need to have a specific hierarchy of folders in your documents folder like this:

  • Documents --en-EN ---smartlook-info.md ---platform-terms-of-use.md ---platform-privacy-policy.md --de-EN ---smartlook-info.md ---platform-terms-of-use.md ---platform-privacy-policy.md ... --[lang]-[countrySuffix] ---your-policy.md ---your-terms.md ---your-smartlook-info.md
  • MarkdownService To download markdown you need to use getMarkdown method like this:
 private getMarkdown(type: MarkdownType) {
      (result) => {
        this.markdown = result;
      (error) => {console.log(error)});

type is a MarkdownType enum lang is a string 2 letter language shortcut like "en"

  • Smartlook service This service use MarkdownService and have similar method getMarkdown to get smartlook info but it returns promise.
 private getMarkdown() {
    .then(result => {
        this.markdown = result;

It also provide a methods for cookie management. Here are some use cases:

  saveConsent() {
    window.onunload = () => {

  if (this.smartlookService.isConsentSet()) {
      this.consentGiven = this.smartlookService.isEnabled();

.isConsentSet() - check if cookie is created with true or false value .isEnabled() - checks if value is true .save(boolean) - saves user choice.

Built With

  • ngx-smart-modal - Angular library for managing modals inside any Angular project
  • ngx-md - Angular directive for parsing markdown content in your web application
  • ngx-ui-switch - Switch component for Angular