Customizing your Portal

Developer Experience Portal supports customization via JavaScript. In order to change anything specific, you need to pass in an object having any of the following properties that you want to override. The list of properties that you can override are shown below:

Option Properties

Property NameDefault ValueTypeDescription
containerapimatic-portalStringContainer ID to render the portal
apiKeyN/AStringapiKey of your API
baseThemelightStringDefault theme of your portal (possible values: light, dark)
loadAllDocsOnInitfalseBooleanAllows you to load all language docs on portal initialization. (default behavior: docs are loaded based on the current active language)
allowedLanguages[]ArrayLimit the number of languages to show on your portal (possible values: angular_javascript_lib, objc_cocoa_touch_ios_lib, cs_portable_net_lib, java_gradle_android_lib, java_eclipse_jre_lib, php_generic_lib, ruby_generic_lib, node_javascript_lib, go_generic_lib, python_generic_lib, docs-http)
customDocs{}ObjectAllows you to load custom docs for each language. You can provide docs links for each language using Key-Value pairs like { "angular_javascript_lib":"<link to markdown>" }
themeOverrides (palette){}ObjectYou can override main theme colors by creating a Palette Object and changing any of the properties of the palette (properties are described below)
height [Optional]500pxStringAllows you to change the height of the portal (can be in px, vh)
isFixedHeightfalseBooleanAllows you to switch between fixed height scrolling and full page scrolling

Palette Properties

Palette ColorDescription
primaryColor1Primary color of the portal (mainly header background and button background)
primaryColor2Primary color of all the fonts used
primaryColor3Font color for language tabs
accentColorAccent color applies to inline codes in the portal
backgroundCanvasPage background
foregroundCanvasText container background

Example Options Object

    var options = {
        container: "apimatic-container",
        apiKey: "YOUR API KEY",
        baseTheme: "dark",
        loadAllDocsOnInit: false,
        allowedLanguages: [ "cs_portable_net_lib" ],
        customDocs: {
            "cs_portable_net_lib": ""
        themeOverrides: {
            palette: {
                primaryColor1: "#CCC"
        height: "800px"

Use the Options Object

You can pass the options object in the show method of the APIMaticDevPortal class like

Custom Docs

You can host your custom docs on any site and override a specific language docs by adding it in customDocs property. The structure of the custom docs must contain a 2nd level Getting Started heading as well as 2nd level heading ending with reference. You can see a minimal sample custom doc below:

## Getting Started
This is the getting started part. Welcome to my custom docs.

## API Reference
My API reference containing all endpoint information.

Have questions? Submit a request.