SHARE THIS ARTICLE

Embeddable DX Components For Your Portal

You can enhance your existing portal by embedding the Developer Experience Portal components into it via Javascript. In this documentation, we will give you a complete walkthrough from generating a portal from your API description to embedding its components into a sample application. The API we will be using for this purpose is the Calculator API.

Generating Portal From Your API Description

On our main website, click on “Developer Experience Portal”. A page similar to the one shown below will open:

Developer Experience Portal Landing Page

Now bring in your API description file either by providing a URL or by uploading a local file from your system. The file must be in one of the supported formats (APIMATIC, WADL, WSDL, Swagger, Open API, RAML, API Blueprint, IODocs, Google Discovery, Mashape, Postman Collection, HAR). Then click on “Generate Portal”.

Upload an API description file

Our system will validate your file at this point and indicate any errors/warnings found in your API description file as shown below:

Validate API description file

If there are any errors found, you will have to fix them before proceeding ahead. If all is good, then you will be taken to the preview of the default landing page of your portal as shown below:

Portal Default Landing Page

Customize Your Embeddable Portal

You have the option to customize the look and feel of your portal for it to look exactly the way you want it to be. Unlike the hosted portal, the embeddable portal does not feature a landing page. You can, however, customize the docs and the overall appearence of the portal.

From the pop-up appearing at the bottom of the landing page, click on “Customize/Publish”.

Customize and Publish portal

Choose “Embedded” as the portal type option. You will then see a list of customizations available from which you can:

  • Modify the primary color of the portal.
  • Choose to keep/remove HTTP docs section in the portal
  • Enable/disable the option to allow users to export to various formats
  • Keep the navigation for the docs on top or left depending on what suits you.
  • Enable docs for languages of your choice e.g. you can choose to disable docs for PHP. You can also specify a link to GitHub repository where that language’s SDK is deployed.
  • Add documentation/guides to provide any additional information to your portal users.

Customize portal

More details for each of these customizations is available at Customizing Your Portal.

Embed Portal Components

Save the changes you’ve made so far and click on “Embed”. You will be provided with a snippet containing the script.

Embed portal

Copy this script and paste it in your application. See an Example below.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>Your Portal - Powered by APIMatic</title>
    <link 
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
    rel="stylesheet">
 
</head>

<body >
    <!-- Your script goes here -->
</body>

</html>

That’s it! Run your application to see the portal in action. You can view a running sample app here.

Sample app


Have questions? Submit a request.