Custom Branding for API Documentation

Note

This article only applies to users who have this feature already set up on their accounts.

For new users, branding options are available with SwaggerHub Portal.

Organizations can add custom branding to their API documentation on API Hub for Design. The branding options include a custom logo and header color that will be displayed in consumer-facing documentation for APIs and domains.Interactive API Documentation

Custom logo in API documentation

Logo requirements

  • PNG or JPG

  • Less than 2 MB

For the best results, use:

  • A PNG image with a transparent background

  • An image up to 230×55 px in size (larger images will be downscaled proportionally to fit this size)

Apply branding

The organization owner can configure the branding options on the Docs Branding page of the organization settings:

  1. Go to My APIs and click next to your organization name in the sidebar.

  2. Select Docs Branding in the sidebar on the left.

  3. Specify the branding options:

    • Upload Logo – Drag your image and drop it to the upload area, or click the upload area to select the image manually. Make sure the logo image meets the requirements.

      Tip

      To crop or resize the logo, click Edit and use the image editor (see below).

    • Alternative Text – text for the alt attribute of the logo’s <img> tag in the HTML code. For example, YourCompanyName.

    • Header Style – the documentation header color as a hexadecimal HTML color code, #xxxxxx. You can use the Google color picker to find hexadecimal color values.

  4. Click Save Draft. At this point, the branding settings have been saved, but they have not been applied yet.

  5. Click Preview to see how your branding will look like in a sample API.

  6. Finally, click Go Live to apply your custom branding.

    Go Live

The documentation pages for your organization’s APIs and domains will now appear with your custom logo.

Restore the default style

To restore the default API Hub for Design logo and header color in API documentation:

  1. Open the Docs Branding page of the organization settings.

  2. Remove the logo by clicking Remove.

  3. Delete the Alternative Text and Header Style values.

  4. Click Save Draft, then Go Live.

FAQ

Where are the uploaded logos stored?

API Hub for Design SaaS stores the logos in an Amazon S3 bucket.

API Hub for Design On-Premise stores the logos locally on the API Hub for Design VM.

See Also

Publication date: