Integration of Notice

Overview

Concur provides several functions to integrate consent notices into your application. These notices can be displayed in various positions to ensure compliance with consent management policies. Below are the functions available for integrating notices:

Functions

1. morajNoticeCenter

Displays a notice in the center of the application.

Function Signature:

morajNoticeCenter(cp_id, app_id, org_id, org_key, org_secret)

Parameters:

• cp_id (string): The unique identifier of the collection point.

• app_id (string): Your application ID, retrieved from the .env file.

• org_id (string): Your organization ID, retrieved from the .env file.

• org_key (string): Your organization key, retrieved from the .env file.

• org_secret (string): Your organization secret, retrieved from the .env file.

Usage Example:

Javascript

morajNoticeCenter(
      "cp_id(from yaml)",
      process.env.CON_APP_ID,
      process.env.CON_ORG_ID,
      process.env.CON_ORG_KEY,
      process.env.CON_ORG_SECRET
    );

React.js

Next.js

Setting Up Environment Variables in different libraries and framework

When working with JavaScript and React.js, it is crucial to manage environment variables effectively to ensure a smooth development process. Follow these steps to set up your environment variables:

1. Install dotenv Package: To load environment variables in your application, first, ensure you have the dotenv package installed. You can install it via npm:

   npm install dotenv

2. Configure .env File: Create a .env file at the root of your project directory. This file will store your environment variables. For React.js and Next.js applications, you need to follow specific naming conventions for these variables to ensure they are accessible in your code.

   • For React.js: Prefix your environment variables with REACT_APP_. This ensures that React can expose these variables to your application.

   For example:

   REACT_APP_API_URL=https://api.example.com
   REACT_APP_APP_NAME=MyReactApp

   • For Next.js: Prefix your environment variables with NEXT_PUBLIC_. This is necessary for Next.js to expose these variables to both the server and client-side code.

   For example:

   NEXT_PUBLIC_API_URL=https://api.example.com
   NEXT_PUBLIC_APP_NAME=MyNextApp

3. Accessing Environment Variables in Your Code:

   • In React.js: You can access these variables using process.env.REACT_APP_{VARIABLE_NAME} in your React components or other JavaScript files. For example:

     const apiUrl = process.env.REACT_APP_API_URL;

   • In Next.js: Access these variables using process.env.NEXT_PUBLIC_{VARIABLE_NAME} in your Next.js components or other files. For example:

     const apiUrl = process.env.NEXT_PUBLIC_API_URL;

By following these steps and properly configuring your .env file, you ensure that your environment variables are securely loaded and available throughout your application.

JavaScript

CON_ORG_ID=your_org_id
CON_ORG_KEY=your_org_key
CON_ORG_SECRET=your_org_secret
CON_APP_ID=your_app_id

React.js

Next.js

2. morajNoticeLeft

Displays a notice on the left side of the application.

3. morajNoticeBottom

Displays a notice at the bottom of the application.

Implementation Steps

1. Install Required Packages: Ensure that you have all necessary npm packages installed in your project.

2. Configure Environment Variables: Make sure your .env file contains the correct values for con_app_id, con_org_id, con_org_key, and con_org_secret.

3. Add Notice Functionality: Use one of the provided functions (morajNoticeCenter, morajNoticeLeft, morajNoticeBottom) to integrate the notice into your application at the desired location.

4. Test Integration: Verify that the notice appears as expected in the center, left side, or bottom of the application.