SHARE THIS ARTICLE

Customizing Your Portal

There are many ways you can customize the look, feel and behavior of your Developer Experience Portal. You can completely adjust the style and aesthetics according to your brand and add functionality according to your need. Customizations can be made as soon as you are ready to generate your portal.

From your Dashboard, once you have clicked the Generate button

Dashboard-Image

And then have selected your API version, Click on the Proceed button

Version-Select

Click Proceed again when your API Validation passes

API Validation

Click Preview API Portal to preview your Generated Portal

Preview API Portal

On the bottom of the Preview Page, navigate to the Customize/Publish button

Customize-publish button

Click the Customize/Publish button to start customizing your Portal.

Click-customize-publish-button

Customization starts with selecting between either an Embedded or Hosted portal. Embedded Portals can be incorporated into your current system, whereas Hosted Portals are a completely separate resource, hence styling options for both vary.

Embedded Portal

Embedded Portals are designed to sync up with your existing systems seamlessly. You can customize the portal both visually and functionally with just a few toggles and clicks.

Embedded Portal Customization Page

Primary Color

The Primary Color of the entire portal can be changed to match your styling. To change the theme color:

  • Navigate to Primary Color on the Customization Panel
  • Select the color from the color picker

Select color from color picker

HTTP Docs

HTTP Docs can be Enabled or Disabled using the HTTP toggle. To Toggle that:

  • Navigate to the HTTP Toggle on Customization Panel
  • Toggle it on or off as you like

HTTP toggle

When toggled off, Documentation would not be made available in HTTP format.

API Export

API Transformer can be enabled or disabled via Export toggle. The Export option appears as a drop down on the Navigation bar.

Export toggle

API Descriptions in over 12 formats can be exported via the Export option.

API Export Formats

Docs Navigation

Choose where you want the Document Navigation, as according to your existing theme and symmetry. To do that:

  • Navigate to Docs Navigation on the Customization Panel

Docs navigation toggle

  • Select between either Left Navigation

Left navigation

  • Or Top Navigation

Top navigation

Languages

Language support can be added or removed on the go with just a few simple clicks. Selected Languages appear in the Language Drop Down on the Navigation bar.

To select/unselect a language:

  • Navigate to the Languages on the Customization Panel

Language option

  • Check boxes for Languages you want to offer support in

Language checkboxes

  • Uncheck boxes for Languages you don’t want to offer support in

Unchecked languages boxes

Github Links of hosted SDKs can be added for your selected Languages. To add a Link:

  • Navigate to Github Links button on Customization Panel inside the Languages menu

Github links for languages

Add the Github Links against their respective Language and press Done when finished.

Github links dialog box

Information about published packages for each language can also be added from the Languages option. To do this:

  • Click on Published Packages option on the Customization Panel, inside the Languages menu.

Package publishing option

  • This will open the Package Managemnet dialog, learn how to Add Packages to Portal.

Package publishing dialog box

Guides

Add in additional sections for further instructions as Guides. The sections can be named as desired. To add a Guide section:

  • Navigate to Guides on Customization Panel

Custom Guides button

  • Click the Add New Guide Button to add a new Guide. Add content in Heading and Body and click Done when finished

Add new guide dialog box

To remove a Guide Section:

  • Navigate to the Guide Section you want to remove

  • Click the Remove button

Custom Guide added

Embed

Once you are done with Customization you can generate the Embeddable Code Snippet to sync the portal with your current system. To do that:

  • Navigate to the Embed button to generate the script for embedding your portal

Embed button

Copy the code snippet and paste it into your desired HTML page

Embeddable snippet

Embedded code can be pasted in any HTML Page.

(Before embedding portal)

Portal before embedding code

(After embedding portal)

Portal after embedding code

Hosted Portal

Developer Experience Portal can be hosted as a separate resource as well . You can specify a domain address of your choice (subject to availability) and completely customize the look and feel of your portal to reflect your brand. Changes can be made to a hosted portal as many times as required. Hosted Portals have a Landing Page and a Docs Page

Landing Page

Landing page

Title and Tagline

Change the Title and Tagline of your portal anytime according to your need. To add a Title and Tagline:

  • Navigate to the text fields Title and Tagline on the Customization Panel

Title and tagline

  • Type in your Title and Tagline

Choose your own Cover Image and Logo. To add a Cover Image and Logo:

  • Navigate to the Cover Image and Logo fields on the Customization Panel

Cover image and logo buttons

  • Click the Upload button for each field to select an image file from your device

Website URL

Specify a URL to link the portal header to your website. To add a Website URL:

  • Navigate to the Website URL field on the Customization Panel

Website URL button

  • Type in your Website URL

Primary Color

The theme of the entire portal can be changed to match your styling. To pick a color:

  • Navigate to Primary Color on the Customization Panel

Primary color input

  • Click selected color to open color picker

Custom Sections

Add Custom Sections to your Landing Page to provide additional introductory information. Custom Sections appear below Languages on the Landing Page

To add a Custom Section:

  • Navigate to and click the Custom Sections button on the Customization Pane

Custom section input

  • Click Add New Custom Section

Custom section dialog box

  • Fill in the Title and the Description of the Custom Section

  • Click Done to record your changes.

Custom Sections can also be removed when required.

To remove a Custom Section:

  • Navigate to the Custom Section you want to remove

  • Click the Remove Button

Remove custom section

Add, remove or override the default Navigational Links present in the Header (Getting Started, API Reference, Model Reference). Navigations links appear on Nav-bar of the Portal.

To add a Navigation Link:

  • Navigate to Navigation Links on the Customization Panel

Navigation Link input

  • Click the Add Navigation Link button

Add navigation link button

  • Fill in the Link Text and Link URL of the Navigation Link

  • Navigation Links* can also be removed when required

To remove a Navigation Link:

  • Navigate to the Navigation Link you want to remove

Navigation link section

  • Click the Remove Button

Badges

Add or remove badges from your portal.

To add a Badge:

  • Navigate to Badges on the Customization Panel

Badges input

  • Check the box against the Badge you want to appear on your portal

  • Uncheck the box against the Badge you want to remove

  • Add Description for Custom Badges

Custom Badges

Docs Page

Docs Page

HTTP Docs

HTTP Docs can be Enabled or Disabled using the HTTP Toggle. To do that:

  • Navigate to the HTTP Toggle on Customization Panel

HTTP Docs

  • Toggle it on or off according to your need

When toggled off, Documentation would not be made available in HTTP format.

API Export

API Transformer can be enabled or disabled via Export toggle. The Export option appears as a drop down on the Navigation bar.

API Export toggle

API Descriptions in over 12 formats can be exported via the Export option.

API Export Formats

You can download API Description in different formats via the Export option.

Languages

Language support can be added or removed on the go with just a few simple clicks. Selected Languages appear in the Language Drop Down on the portal Nav-bar.

To select/unselect a language:

  • Navigate to the Languages on the Customization Panel

Languages input button

  • Check boxes against Languages you want to offer support in

Languages checkboxes

  • Uncheck boxes for Languages you don’t want to offer support in

Languages checkboxes unchekced

Github links of hosted SDKs can be added for your selected languages. To add a Link:

  • Navigate to Github Links button on Customization Panel inside the Languages menu

Github Links

  • Add the Github links against their respective Language and press Done when finished

Github Links Dialog Box

Information about published packages for each language can also be added from the Languages option. To do this:

  • Click on Published Packages option on the Customization Panel, inside the Languages menu.

Package publishing option

  • Add the information about the package, i.e name of the published package along with its version number. And press Done when finished.

Package publishing dialog box

Guides

Add in additional sections for further instructions as Guides. The sections can be named as desired.

To add a Guide Section:

  • Navigate to Guides on the Customization Panel

Guides input

  • Click the Add New Guide Button to add a new Guide

Guides input dialog box

  • Add content in Heading and Body and click Done when finished

To remove a Guide Section:

  • Navigate to the Guide you want to remove

Remove guide

  • Click the Remove Button

Publish Portal

The Hosted Portal can be published in two ways:

  • APIMatic Hosting
  • White Label Hosting

To publish your portal:

  • Navigate to and click the Publish button on the Customization Panel

  • Select between APIMatic Hosting or White Label Hosting

Publish portal button

APIMatic Hosting

For hosting on a domain provided by APIMatic, you will have to provide us with a unique identifier which is called a “slug”. The slug will be used to form the unique URL your portal is going to be hosted at.

Please note URLs are subject to availability and you can only choose a slug that’s not already in use.

  • Once you have entered a Slug of your choice, click Done to Publish your Portal

Portal hosting slug

For this demo we chose “apimatic-calculator” as our Slug, and the Portal is now hosted at https://apimatic.io/apidocs/apimatic-calculator.

Portal hosted dialog box

WhiteLabel Hosting

Instead of choosing to host the Portal on our domain, you can get the Portal White-labeled and hosted at a domain of your choice. Contact us for further details on this.

Republishing

You can make customizations to your Portal even after it’s published and can Republish it with the latest updates. To Republish your portal:

  • Click on Update and update the existing version.

Update hosted portal


Have questions? Submit a request.