Skip to main content

Embedding Portal In Existing Site

You can host SDKs and Docs on an API Portal as an entirely separate project, on a domain address of your choice, or embed them in your already existing portals or documentation sites.

Once you have generated your portal and customized it, you can publish it as embeddable portal components into your existing website/portal.

  • Click on Publishing on the left sidebar under Portal Settings.

  • A list of the versions of your API and publishing status is shown. If the version is unpublished, the API Version under Documentation Settings is labelled as Draft.

  • Select the version from the drop-down menu against API Version to publish.

APIMatic Portal Editor Published

  • Click on the Publish Portal button.

APIMatic Portal Publish

  • If you have any unsaved changes, a prompt is shown asking to discard the changes or publish after saving the changes. Click on the required option.

APIMatic Portal Editor Unsaved Changes

If you click on Save and Publish, you are shown the following options. Click on Embedded.

APIMatic Portal Editor Publishing

Embed Portal Components​

  • Select the API version you want to generate the embeddable script for. Click on Generate Script.

APIMatic Portal Embed

  • You are provided with a snippet containing the script to be embedded into your site.

  • Click on Copy Snippet to copy this script and paste it in your application. The script only needs to be embedded once, as it will always fetch the latest published artifacts like docs and SDKs. For any branding changes, you need to embed the script again. See an Example below to see where to paste the script in an HTML page.

APIMatic Portal Embed

  • The following occur after publishing:
    • You receive a confirmation email regarding publishing success or failure.
    • The status of the Version changes from Unpublished to Published.
    • The status next to API Version changes to LIVE from DRAFT.

Where to Embed the Portal Components?​

Let's suppose this is a sample HTML page of your documentation site/portal. Paste the copied script in the <body> of the page.

<!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>

Your embedded portal will look similar to this:

Sample app

Republish Portal​

You can make changes to the customizations and other configurations of your portal after it is published. The changes are automatically reflected in your portal without having to embed it again. Once you make the changes, click on Save Changes.

APIMatic Portal Publish

Unpublish Portal​

You can unpublish a published portal for any specified API Version at any time.

  • Click on Publishing under Portal Settings in the sidebar.
  • Click on Unpublish for the API Version you want to unpublish.

APIMatic Portal Publish

  • The status of the Version changes from Published to Unpublished.
  • The status next to API Version changes from LIVE to DRAFT.

Host Portal on Domain​

Instead of embedding the Developer Portal, you can choose to host it on apimatic.io or a custom domain.