With Peaka as a Data Management Tool with UI, you can access all of its premium features through either its powerful API or/and its intuitive user interface (UI). Whether you prefer seamless automation via the API or a more visual approach using the UI, Peaka offers the flexibility to suit your needs.

​
Embed Peaka’s UI in Your Web Application

You can easily integrate Peaka’s UI into your own web application. This allows your users to enjoy the full range of Peaka’s advanced features without ever leaving your platform. By embedding Peaka, you provide a seamless and cohesive experience, empowering your users with the tools they need to maximize productivity and efficiency.

​
Key Benefits:

  • Access all premium features via API or UI.
  • Embed Peaka’s UI directly into your web application.
  • Deliver a unified experience for your users.
  • Enhance productivity with Peaka’s advanced tools.

​
TLDR;

If you want to see it in action you can check our example applications that created in NextJs with Python/NodeJS backend. Go to Python App Go to Node App Go to Running Example

​
Prerequisites

​
Initiate the Session

  • To begin, you need to initiate a session with Peaka using your Partner API Key as the token.
curl --request POST \
  --url https://partner.peaka.studio/api/v1/ui/initSession \
  --header 'Content-Type: application/json' 'Authorization: Bearer <token>'\
  --data '{
    "projectId": <your_project_id>
  }'
  • The endpoint will provide a URL to initiate your session.
{
  "sessionUrl": "https://partner.peaka.studio/api/v1/ui/session?code=<session_code>"
  "partnerOrigin": "https://<partner_origin>.peaka.studio/"
}
You can access the user interface using the provided URL.

​
Enabling Embedded UI for Peaka Integration Using an iframe

For security reasons, you cannot use the session URL directly in an iframe. To embed Peaka within an iframe, you need to enable the embedded UI for your partner API key. In order to do that you should;
  • Go to Developer Settings in your peaka account.
  • Find your api key in the table then click ... button.
  • Select Enable Embedded UI option
  • Enable Embedded UI for this API Key
  • Enter your domain that you want to embed the Peaka app.
    URL is needed for security reasons. Please be aware that your application should be served over HTTPS for use in an iframe.
  • Enter a Company Name for white labeling in Embedded UI.
  • If you want to customize the UI, click “Customize UI Theme” button then give a theme name and upload your custom css file. You can also download the valid example of the customization file (Check out the related documentation to learn more about customization). You can add custom css files more than one and change themes in runtime. After you set the css file, you should start the session with following parameters to enable custom theme. 
      {
    projectId: <your_project_id>
    theme: <your_theme_name>,
    themeOverride: true
  }
Now you are ready to embed Peaka’s UI into your web application using an iframe. 
<iframe src="<your_session_url>" />
Note: If you want to switch between different themes in runtime you can do it with iframe’s post message method.
  iframeElement.contentWindow.postMessage(
    {
      theme: <your_theme_name>
      themeOverride: true,
    },
    partnerOrigin: <your_partner_origin>
  );
Congratulations! You have successfully embedded Peaka’s UI into your web application. Your users can now seamlessly interact with Peaka’s interface to manage their data efficiently and effectively.

​
Hiding Parts of the Embedded UI

In Embedded Mode, you can customize the Peaka UI by hiding specific components or features. To do this, use the featureFlags key when initiating the UI session. This allows you to tailor the interface to your application’s needs, ensuring a seamless and focused user experience.

​
Example:

When initializing the UI session, specify the features you want to hide or disable using the featureFlags configuration. This ensures that only the relevant parts of the UI are displayed to your users. For example you can hide queries sections in Peaka’s UI with following configuration. 
curl --request POST \
  --url https://partner.peaka.studio/api/v1/ui/initSession \
  --header 'Content-Type: application/json' 'Authorization: Bearer <token>'\
  --data '{
    "projectId": <your_project_id>
    "theme": <your_theme_name>,
    "themeOverride": true,
    "featureFlags": {
      "queries": false,
    }
}'
For more details, refer to the Embedded API Reference.