# Custom Portal integration

This guide is written for customers that embed a SuperTables in a custom portal and want to utilize the powerful features of SuperTables from the portal interface like exporting to Excel.

## Example video

{% embed url="<https://1304574535-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2zyseN6XFBaLs6YTcnd%2Fuploads%2FrCpgvweYlGTWudzsFjil%2Fcustom-portal-integration.mp4?alt=media&token=9c549535-a61a-46e9-ba8c-ba06966986b1>" %}

{% file src="<https://1304574535-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2zyseN6XFBaLs6YTcnd%2Fuploads%2FrCpgvweYlGTWudzsFjil%2Fcustom-portal-integration.mp4?alt=media&token=9c549535-a61a-46e9-ba8c-ba06966986b1>" %}

## Step 1: Tableau Desktop

First create a dashboard with a SuperTables with the following settings:

A string **parameter** called: stateparameter

A string **parameter** called: switcher

<figure><img src="https://1304574535-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2zyseN6XFBaLs6YTcnd%2Fuploads%2FsYGOJscenLVu9LuZ1UY8%2FScherm%C2%ADafbeelding%202025-11-06%20om%2016.40.52.png?alt=media&#x26;token=efbf10c9-57f4-4272-8907-185a321ba406" alt="" width="375"><figcaption></figcaption></figure>

#### General Settings

Use the following settings in **SuperTables**

<figure><img src="https://1304574535-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2zyseN6XFBaLs6YTcnd%2Fuploads%2FlnZKx0bwcZTMQq3JjMUh%2FScherm%C2%ADafbeelding%202025-11-06%20om%2016.41.52.png?alt=media&#x26;token=a947cd68-e04d-4122-803f-89e16bfef8ef" alt=""><figcaption></figcaption></figure>

#### Appearance

-> Use a parameter to switch between layouts

select the switcher **parameter** as a parameter in the dropdown.

<figure><img src="https://1304574535-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2zyseN6XFBaLs6YTcnd%2Fuploads%2FSmqXZQx1ELpS8XmKKdpn%2FScherm%C2%ADafbeelding%202025-11-06%20om%2016.42.44.png?alt=media&#x26;token=b491b333-3259-4fde-b6cb-f670384c18f7" alt=""><figcaption></figcaption></figure>

## Step 2: Set up the custom portal code

Download our example file to create a basic looking portal with custom buttons.

{% file src="<https://1304574535-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2zyseN6XFBaLs6YTcnd%2Fuploads%2FdbHql9N6Q7GrttKN0Yh4%2Fcustom-portal-integration.html.zip?alt=media&token=56ab6c5b-0c71-4e80-80be-991f914c1fce>" %}

Update the following values in the html file:

* the **src** value in \<tableau-viz> to the url of you workbook

<figure><img src="https://1304574535-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2zyseN6XFBaLs6YTcnd%2Fuploads%2FbiWJ0SV7n5T1OACJViHW%2FScherm%C2%ADafbeelding%202025-11-06%20om%2016.39.44.png?alt=media&#x26;token=2112a962-76ae-4c45-bebf-1fd1b88c5a30" alt=""><figcaption></figcaption></figure>

* **stateParameterName** to the name of the parameter name you use for the state parameter
* **switchParameterName** to the name of the parameter name you use for the layout switcher.
* **extensionURL** to the url where SuperTables is hosted.

<figure><img src="https://1304574535-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2zyseN6XFBaLs6YTcnd%2Fuploads%2FCN2vzTWJFnsrscE4QBsH%2FScherm%C2%ADafbeelding%202025-11-06%20om%2016.39.08.png?alt=media&#x26;token=3b9c2651-30d8-4091-b563-098edd0bce1e" alt="" width="375"><figcaption></figcaption></figure>

## Step 3: The result

<figure><img src="https://1304574535-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2zyseN6XFBaLs6YTcnd%2Fuploads%2FPmmelOjJOOQso5QZw1P8%2FScherm%C2%ADafbeelding%202025-11-06%20om%2016.46.07.png?alt=media&#x26;token=078c6e8b-8727-4622-b942-8fc8d0e7b234" alt=""><figcaption></figcaption></figure>