The main embed client. This object manages the life cycle of the embed content on the host page.
npm install @pyramid-embed/embed-jsbash
yarn add @pyramid-embed/embed-js
`
`bash
npm i @pyramid-embed/embed-js
`
API documentation
Please check online help for the general documentation.
Usage
`javascript
import { PyramidEmbedClient } from '@pyramid-embed/embed-js';
`
`javascript
const embedClient = new PyramidEmbedClient('http://pyramid:8181');
`
Examples
$3
##### The code example uses existing embed auth cookie.
`javascript
import { PyramidEmbedClient } from '@pyramid-embed/embed-js';
`
`javascript
// create embed client
const embedClient = new PyramidEmbedClient('http://pyramid:8181');
// create embed options
const embedOptions = {
contentId: 'f5366b40-fbc7-4773-8180-7759bb0760df'
}
// embed a report into a div element
const el = document.getElementById('embed-container');
embedClient.content(el, embedOptions);
`
`html
`
$3
##### The code example uses existing embed auth cookie.
`javascript
import { PyramidEmbedClient, Filter } from '@pyramid-embed/embed-js';
`
`javascript
const embedClient = new PyramidEmbedClient('http://pyramid:8181');
const filter = Filter.create().addUniqueName('[customer].[country].[France]');
const embedOptions = {
contentId: 'f5366b40-fbc7-4773-8180-7759bb0760df',
filters: filter
}
const el = document.getElementById('embed-container');
embedClient.content(el, embedOptions);
`
Embed Options
| Name | Type | Description | Required |
| ------------- | ------------- | ------------- | ------------- |
| contentId | string | GUID string of the item that is to be embedded | yes |
| filters | Filter | Filter object of items to drive filtering on the content. |
| targets | Target | Target object of items to drive targeted filtering on the content. |
| deviceType | 'desktop' \| 'tablet' \| 'phone' | Specifies the layout type of the presentation to use. If not supplied, the device type is determined automatically. |
| theme | 'dark' \| 'light' | Theme colors of the built-in dialogs |
| contentTheme | string | Overrides all content themes (Pyramid 2025.0 version or greater is required)
| contentThemeOverrides | object | Overrides the current content theme (Pyramid 2025.01 version or greater is required)
| appStyles | object | Object of settings to highly customize the embedded client application's appearance. (Pyramid 2025.0 version or greater is required) |
| slideNumber | number | Initial slide number, starts from 1 |
| locale | string | User locale, applies when anonymous embed license is available |
| exporting | ExportingOptions | Exporting content options. (Pyramid 2023.02 version or greater is required) |
| fullDiscovery | boolean | Shows data discovery slicers and legends. (Pyramid 2023.02 version or greater is required) |
Filter
The filter objects contain information on how to dynamically filter embed content (both reports and dashboards).
See online help
Target
The target objects contain information on how to dynamically filter embed dashboard content by directing the attached filters to the right named targets (as designed in the presentation itself)
See online help
Exporting Options
- Available since 3.0.1
- Pyramid 2023.02 version or greater is required
| Name | Type | Description |
| ------------- | ------------- | ------------- |
| exportTypes | Array | Sets available export content options. Supported values: 'pdf', 'png', 'excel', 'csv'. To hide all exporting options set it to null or an empty array. By default all options are visible. |
Further help
For more help on embedding with Pyramid, especially instructions on authentication, scenarios and use of REST APIs together with embedding, please see online help.
Hub
- Available since version 3.0.0
- Pyramid 2023.01 version or greater is required
Examples
$3
`html
`
`javascript
import { PyramidEmbedClient } from "@pyramid-embed/embed-js";
`
`javascript
const embedClient = new PyramidEmbedClient('http://pyramid:8181');
const container = document.getElementById('embed-container');
const hubEmbedOptions = {
theme: "dark",
editable: true,
showTabs: true,
responsiveness: "compact",
};
const hub = await embedClient.hub(container, hubEmbedOptions);
`
Hub Instance
| Method | Description |
| ------- | ----------- |
| changeSelectedTab(tabIdx) | changes selected tab by index |
| getSelectedTab() | returns selected tab index |
| getTabsList() | returns all tabs as an object |
Hub Embed Options
| Name | Type | Description |
| ------------- | ------------- | ------------- |
| theme | 'dark' \| 'light' | Theme colors |
| editable | boolean | Enables editing capabilities
| showTabs | boolean | Shows or hides tabs
| responsiveness | 'compact' \| 'none' | Responsive layout behavior
| style | Object | Custom styles |
| appStyles | object | Object of settings to highly customize the embedded client application's appearance. (Pyramid 2025.0 version or greater is required) |
| smartReportDialogPopupMode | 'none' \| 'tab' \| 'popup' | Smart report button behavior, 'none' - not shown, 'tab' - opens pyramid client in a new browser tab, 'popup' - opens pyramid client in a flyout popup using an iframe
| template | string | use specific embed hub template |
Custom styles object
`javascript
{
'tabs.nonSelectedTab.color': 'red',
'tabs.nonSelectedTab.backgroundColor': '#f2f2f2',
'tabs.nonSelectedTab.fontSize': 12,
'tabs.nonSelectedTab.fontWeight': 500,
'tabs.selectedTab.color': '#353d42',
'tabs.selectedTab.backgroundColor': '#f2f2f2',
'tabs.selectedTab.fontSize': 12,
'tabs.selectedTab.fontWeight': 500,
'tabs.border': '2px solid #d2d6d9',
'tabs.backgroundColor': '#f2f2f2',
'tabs.addTabIconColor': '#d2d6d9',
'tabs.deleteTabIconColor': 'gray',
'tabs.iconColor': '#8599A8',
'buttons.color': 'green',
'buttons.secondaryColor': 'blue',
'buttons.hoverColor': 'red',
'tiles.backgroundColor': '#ffffff',
'tiles.titleColor': '#353d42',
'tiles.boxShadow': '1px 1px 1px 1px rgba(0, 0, 0, 0.19)',
'tiles.addWidgetPrimaryColor': '#8599A8',
'tiles.addWidgetSecondaryColor': '#328EC1',
'picker.backgroundColor': '#ffffff',
'picker.tabs.nonSelectedTab.color': 'red',
'picker.tabs.nonSelectedTab.backgroundColor': '#f2f2f2',
'picker.tabs.nonSelectedTab.fontSize': 12,
'picker.tabs.nonSelectedTab.fontWeight': 500,
'picker.tabs.selectedTab.color': '#353d42',
'picker.tabs.selectedTab.backgroundColor': '#f2f2f2',
'picker.tabs.selectedTab.fontSize': 12,
'picker.tabs.selectedTab.fontWeight': 500,
'picker.tabs.border': '2px solid #d2d6d9',
'picker.tabs.backgroundColor': '#f2f2f2',
'picker.tabs.addTabIconColor': '#d2d6d9',
'picker.tabs.deleteTabIconColor': 'gray',
'picker.tabs.iconColor': '#8599A8',
'container.border': '#8599A8',
'canvas.backgroundColor': 'lightblue',
}
`
Search API
- Available since version 5.1.0
- Pyramid 2025.01 version or greater is required
Examples
$3
`html
`
`javascript
import { PyramidEmbedClient } from "@pyramid-embed/embed-js";
`
`javascript
const embedClient = new PyramidEmbedClient('http://pyramid:8181');
const searchContainer = document.getElementById('embed-search-container');
const previewContainer = document.getElementById('embed-preview-container');
const embedSearchOptions = {
theme: 'light',
locale: 'en-US',
appStyles: { global: { font: '...' } },
contentTheme: 't1',
contentThemeOverrides: { General: { generalColor1: '...' } },
dataModelId: '',
hideChat: false,
onSearch: () => {
// search started
},
onCloseChat: () => {
// chatbot closed
},
onPreviewChange: (hasPreview) => {
// chatbot preview changed
}
};
const searchApi = await embedClient.search(searchContainer, previewContainer, embedSearchOptions);
// Hide the search
searchApi.hideSearch();
// Show the search
searchApi.showSearch();
// Save the generated report to the private content folder in Pyramid
const result = await searchApi.save();
``