Embeddable DX Components For Your Portal
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:
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”.
Our system will validate your file at this point and indicate any errors/warnings found in your API description file as shown below:
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:
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”.
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.
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.
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.
Have questions? Submit a request.