---
title: Quickstart
slug: infra/quickstart
createdAt: 2021-08-20T09:08:37.000Z
---

## Introduction

With Socratease Infra, you can enable eLearning functionalities on your website with just **a few lines** of JavaScript code.

1. Imagine your website is [yoursite.com](#). You choose to enable eLearning on the path [yoursite.com/learning](#).
2. For this, all you have to do is return an HTML file that initializes the Socratease JS library. You will initialize the library with parameters like the `username`.
3. Once the library is initialized, it takes over the navigation within. So, for example, if the user initially loads a screen where they can create a quiz, and they click on a button that Previews the quiz, the browser's URL will automatically change to the Preview link.
4. So, you will have to just serve **one entrypoint** to your users.
5.

## Minimal Example

```html
<head>
  <script src="https://cdn.socratease.co/socratease.js"></script>
  <link rel="stylesheet" href="https://cdn.socratease.co/socratease.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>

<body>
  <div id="soc-main-app"></div>
  <script>
    const clientId = "LszSmFPb";
    const clientSecret = "kAoEz0SKXzd2EVn";
    const payload = {
      username: CryptoJS.lib.WordArray.random(3).toString(),
      user_details: {first_name: "User"},
      path: "/cms/home"
    };
    const jsonPayload = JSON.stringify(payload);
    const hmacPayload = CryptoJS.HmacSHA256(jsonPayload, clientSecret);
    const hmacPayloadB64 = CryptoJS.enc.Base64.stringify(hmacPayload);
    const options = {"ui": {"navbar": {"brand_name": "Your Website"}}};

    window.addEventListener("load", () => {
      Socratease.init(clientId, jsonPayload, hmacPayloadB64, options);
    });
</script>
</body>
```



## Explanation

1. We include the Socratease JS and CSS files, and the [CryptoJS](https://github.com/brix/crypto-js) library (required only for the demo)
2. We include a `<div/>` into which the Socratease library will inject all elements
3. The `clientId` and `clientSecret` are keys you get when you create an account on Socratease. We are showing the `clientSecret` key here for demo purposes. <font color="#d72d2d">DO NOT MAKE THE CLIENT SECRET KEY PUBLIC!</font>
4. [Payload](docId:_7cy1QkSWkEzcP719c1Vu) has information about the user,  what screen must be shown, etc
5. `hmacPayloadB64` is the [Base 64 encoding of the SHA256 HMAC](https://dinochiesa.github.io/hmachash/index.html) of the payload expressed as a JSON string. You will use your `clientSecret` to calculate the HMAC
6. The [Options](docId\:Y71Gy6D17-sUlyuO5jWVe) key has some configuration variables that determine the UI, etc
7. On load, you will initialize the Socratease variable with the arguments shown above. Socratease should then show the component that was requested and load the user's data

## Payload

The payload is a dictionary and has [these keys](https://jsonblob.com/881842184975982592)

