---
title: Getting Started
slug: infra
createdAt: 2021-09-03T12:21:56.000Z
---

This guide will show you how to add e-Learning features to your site with just a few lines of code.

## Creating your Account

1. Visit [https://socratease.co/tenant/register](https://socratease.co/tenant/register)
2. This form will ask for following details:
   1. <u>Admin Username</u>: Your username as on your own website
   2. <u>Admin Email Id</u>: Your email ID
   3. <u>Root URL</u>: This is the domain on which your property will be hosted. It can be something like **https\://yourwebsite.com** You can change this later.
   4. <u>Route Prefix</u>: You may want all of Socratease to get served on something like https\://yourwebsite.co&#x6D;**/learning** In this case, **/learning** is your Route Prefix.
   5. <u>Brand Name</u>: If you enable the Socratease Navbar, this string will be shown on the top left of the navbar. For example, on the Socratease website, "Socratease" is the Brand Name
3. Once your account has been created, you will be redirected to your website's Super Admin homepage

You should now see a pop-up saying "You are viewing the contents of your site". Even though you are on **socratease.co**, all your activities are as if you are on your own website. For example, if you create a quiz here, and you later integrate Socratease with your website, this quiz will automatically be available on your site.

### Client ID and Secret Keys

Apart from admin-related tasks on the Super Admin homepage, you will also see your <u>Client ID </u>and <u>Client Secret</u> keys. You need these keys to integrate Socratease with your site.

But, even before you do the integration, you can explore all the features directly on the Socratease website.

## Creating Content

1. Visit [https://socratease.co/cms/home](https://socratease.co/cms/home)
2. Let's start by adding a Quiz. The quiz creation form is fairly self-explanatory. This article on creating a [Quiz](https://app.archbee.io/docs/SSpPHfBw4nwxFxFSNkBzn/IbnMtwiwaZsnW3Ps3wrYZ) has more details.
3. This [General Knowledge Quiz](https://socratease.co/content/qer-nyh-iat/) shows you how a quiz would look
4. Apart from quizzes, you can create lessons, video courses, etc

You may explore other features of the Socratease product. What is important to note is that any feature that you see on the Socratease site will also be available on your site.

## Integration

You can enable eLearning functionalities on your website with just **a few lines** of JavaScript code. For this part, we need those <u>Client ID</u> and <u>Client Secret</u> keys.

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 with the code snippet shown below.
3. You can check details about each parameter you have to pass for initializing the Socratease JS library [here](https://app.archbee.io/docs/9JhFu1sE6BxsRSY7XPHvC/bT-bS6fLMF-E2WdGL4O-p).
4. 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.
5. So, you will have to just serve **one entrypoint** to your users.
6. The code snippet below shows a minimal example.
7. It is very important that you understand HMAC and Base64 encoding. The article on [HMAC Payload](docId:8AduF2reKmMbjA_Fvq9bX) explains this in detail
8. This code on the [codesandbox](https://codesandbox.io/s/cms-home-xyc4v) playground shows you a <u>frontend-only</u> version of how everything comes together
9. If you are using a code editor and running a server from within it, the code will not run properly. You will have to serve this from a backend (localhost would work too), but you must ensure that  if the browser redirects to a different route due to the Socratease SDK, the new route is also served by this very file

:::CodeblockTabs
Html

```javascript
<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>
<script>
  window.addEventListener("load", () => {
    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" } }
    };
    Socratease.init(clientId, jsonPayload, hmacPayloadB64, options);
  });
</script>
<div id="soc-main-app"></div>

```
:::







&#x20;