Custom panels (BETA)

📘

Custom UI extensions is currently in BETA. As this feature is still in development, it's subject to change. Please send your feedback to [email protected].

NB: Please ensure you test this feature on a draft app, not an approved/public one.

What is a custom panel?


Custom panel

A custom panel is an iframe that’s embedded inside a sidebar panel.


Visibility in Pipedrive’s UI


Custom panel

Just like JSON panels, custom panels are found as a panel in the left sidebar section inside the detail view of Deals, People, and Organizations.

Each app can have 1 custom or JSON panel per detail view. This means each app can have 3 different panels (custom or JSON) altogether - 1 for each detail view (Deal, People, and Organization).

The custom panel will appear at the top of the left sidebar section. Users can change, hide, and reorder their location with other sections in the sidebar.


How can I add a custom panel in Marketplace Manager?


Custom panel

Go to your app’s edit page in Marketplace Manager and scroll to App extensions > Custom UI extensions > Custom panel. Click on “+ Custom panel” and fill in the following fields:

Field

Description

Panel name (required)

The name of your custom panel. Descriptive, max 30 characters and should be sentence-cased (only capitalize the first word).

Panel description

To showcase the interactive features of your app, your panel’s name and description will appear in the Features section of your Marketplace app listing.

Use the description field to let users know what they can do within this panel.

Optional; max 150 characters.

Iframe URL (required)

URL of the web content to be shown within the iframe

  • Please ensure your iframe URL uses HTTPS

    JWT secret

    Optional. Defaults toclient secret.

    Panel locations (one required)

    Choose where the custom panel will be displayed:

    • Deals details view
    • People details view
    • Organizations details view

    Each app can have one custom or JSON panel in each location.

    NB: If your app already has a JSON panel for a specific detail view, that particular detail view will be disabled from Panel locations in Marketplace Manager.


    How to troubleshoot a custom panel


    Note: The app has to be installed by the user in order for them to be able to use custom UI extensions.

    A custom panel is dependent on the iframe URL provided in Marketplace Manager. If users can’t see the panel’s content, this could mean:

    • The web content failed to load
    • The runtime id provided was wrong
    • The SDK wasn’t initialized > if the iframe takes more than 10 seconds to initialize via our SDK, the iframe won't be displayed to the user.

    Please check the iframe URL you provided, its frontend and backend capabilities, and the runtime id provided to the SDK.


    Read next