API Widget

When explaining a concept, you may need to communicate with internal/external APIs. You can use the 'API widget' for this purpose.

We'll cover the following

The API widget is similar to Postman but integrated into our platform. This is what it looks like:

Edit mode
Edit mode

What do I need to know?

To add a request, follow the steps below:

  • Click the + button next to "Collection".

  • A drop-down menu of the request methods will appear. Choose the required option.

  • An "Untitled Request" will be created in your widget's collection. Here, you can enter the Request URL. You can also add the parameters, headers, and body under the "Parameters," "Headers," and the "Body" sections, respectively.

Add a request
Add a request
1 of 3
widget

Once a request is added to the collection, you can click it to:

  • Rename: Change the name of the selected request.

  • Duplicate: Reuse the selected request in the same collection.

  • Delete: Remove the selected request.

  • Mark as Primary: Set it as a preview request by default on the learner's end.

Example

Below we are using the following free fake API: https://jsonplaceholder.typicode.com/.

Collection
Test Request
KeyValueDescription
RESPONSE
Status: ---Size: ---Time: ---

Enter the URL and click Send to get a response

A demo GET request

Learners can click the "Send" button to inspect how the response is received.

Under the "Body" tab, learners can choose the supported data format: JSON, Text, HTML, or XML. Notice the "Status," "Size," and "Time" fields of the response.

Can learners modify the request URL?

If you want learners to change the parameters, they can add the values, save them, and then send the request. Below is an example where we've added a parameter: postId in the edit mode.

Collection
Test Request
KeyValueDescription
RESPONSE
Status: ---Size: ---Time: ---

Enter the URL and click Send to get a response

Using the "Parameters" feature

Try setting its value to 1 and check the response to the final request.

You can also link the API widget with the SPA widget. See the functionality here.