Quickwork Embedded - Getting Started

Make Quickwork a part of your product by embedding its readily available partner APIs and JWT token within your web pages.

The process demonstrates how to embed Quickwork in your product.

What you'll need:

Skill level: Expert

Time required: 30 minutes

• Postman desktop app to use the APIs

• Partner APIs: You can obtain these by contacting Quickwork Relationship Manager

There are two partner APIs using which a new user and an existing user can get an associated JWT token, respectively to access Quickwork.

What is a JWT token?

JSON Web Token (JWT) is an open standard authorization token that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. As it is digitally signed, this information is verified and trustworthy.

Registering a new user to get the associated JWT token

The Create User API lets you register a new partner/user and returns a JWT token to access the platform. To do so, open the partner APIs in your postman account and click the Create User API. Then, switch to the Body tab and ensure that the raw button is selected as a beautifier. You'll see three input fields to register a user. Enter the firstname, lastname, and uniqueID of the user:

1. The unique ID is a mandatory field and could be an employee ID, partner ID, or register ID.

2. The firstname and lastname field is optional.

Once specified, click the Send button:

Figure 1: Registnew user to het JWT token

In the response, you'll get a JWT token. Take note of it as this token lasts for 24 hours only.

Get a JWT token of an existing user

The Get Users JWT Token API gives you the JWT token of an existing user. To get it, click the API, switch to the Body tab and ensure that the raw button is selected as a beautifier. You'll see uniqueID as the only input field. Specify the ID and click on the Send button:

Figure 2: Get JWT token for an existing user

In the response, you'll get a JWT token. Take a note of it as this token lasts for 24 hours only. This API returns a 404 User not found error if you specify an ID of an unregistered user.

In this way, we received the JWT token for a new user and an existing user. Now, let's use this token to access the platform functionality.

Working with Quickwork Embedded SDK

To start working with SDKs, import the Quickwork Framework and Quickwork SDK in your web project.

Pasting the received token in an SDK file

Open the Quickwork SDK file in an editor and search for the Quickwork.setUser() method. Paste the JWT token of a new/existing user within the double quotes of this method:

Quickwork.setUser("JWT_token_of_a_new_or_existing_user");

Setting the navigation

Now, search for the Quickwork.navigateTo() method. A value passed to this method redirects the user to the dedicated functionality of Quickwork. Currently, there are four features of Quickwork that are accessible for partners/users through this SDK file:

1. projects: Redirects the user to the Folders.

2. api-management: Redirects the user to the API Management.

3. databases: Redirects the user to the Databases.

4. constants: Redirects the user to the Constants.

Pass any feature value, say projects as a value to the Quickwork.navigateTo() method:

Quickwork.navigateTo('projects');

Only one value at a time can be defined within this method to access the associated feature. You cannot define two or more above-listed functionalities in one go.

Save the changes of this SDK file, close the editor mode, and open it in a browser tab. The user whose JWT token you've specified will be redirected to the Folders screen on Quickwork:

Figure 3: The Folders screen

Configuring methods in SDK

Quickwork SDK supports the following two types of methods:

1. CSS methods: These methods harmonize the look and feel of Quickwork with the specification of your product; forming an integral part of it:

   1. setCSSChanges()

   2. setFont()

2. URL methods: These methods customize the API endpoint URL and static webhook URL, respectively. The quickwork.co base path in the URLs are replaced with the custom base path of the platform in which Quickwork is embedded:

   1. setAPIMEndpoint()

   2. setBaseURL()

CSS methods

1. setCSSChanges(): Set the cssChanges variable within Quickwork SDK to customize the CSS of Quickwork embedded in your platform. You can change background colors, buttons, font sizes, font colors, etc:

const cssChanges = `
    :root {
        --brand-color: "#ff3964";
        --title-color: "#000000d9";
        --body-text-color: "#000";
    }
    .btn.btn-primary {
        border-radius: "30px";
    }
    .qw-collection-name {
        color: "lightslategray !important";
    }
    #qw-search::placeholder {
        color: "black !important";
    }
    .qw-no-list h4 span, .qw-no-list p {
        display: "none";
    }
`;

2. setFont(): This method allows you to change the font style and size of Quickwork in your platform. You can set the fontChanges variable inside the SDK to the font family of your choice:

const fontChanges = {
    font: `"Poppins", sans-serif`,
    fontURL: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap"
};

URL methods

1. setAPIMEndpoint(): This method allows you to change the base path of the API endpoints created in API Management of Quickwork. You can set the apiMEndpoint variable to your desired URL inside the SDK:

const apiMEndpoint = <YOUR_API_MANAGEMENT_BASE_PATH>;

2. setBaseURL(): This method allows you to set the base URL of all the connectors that support static webhooks. You can set the baseURL variable to your desired URL inside the SDK:

const baseURL = <YOUR_STATIC_WEBHOOK_BASE_PATH>;