# Popup customer portal
This guide covers the customer portal integration from a developers point of view. It assumes that you have already setup your Products in Bunny and enabled them to be visible for self service.
{% hint style="warning" %}
This integration involves adding a Bunny hosted javascript SDK to your application and calling methods on the SDK to popup the subscription management and payment options.
{% endhint %}
Customer portal popup
### Overview
There are 2 steps in this integration.
1. From your applications backend, generate an token via the Bunny API. This token will be required in step 2 to authenticate access to the portal.
2. Add the `bunny.js` script to your application then use a link on your page to popup the portal.
### 1. Setup API credentials
We recommend setting up a new API client specifically for customer portal access. [You can learn how to setup an API client here](/developer/using-the-graphql-api/api.md).
The API client will need to have the **security:read** and **security:write** scopes enabled.
Use the API client to [generate a new access token](/developer/using-the-graphql-api/authorizing-api-requests.md) with the security scopes.
### Request a portal token
Make a request from your backend to obtain the portal security token using the [portalSessionCreate](/developer/using-the-graphql-api/mutations/portalsessioncreate.md) graphql request.
{% tabs %}
{% tab title="GraphQL" %}
**Attributes**
{% code overflow="wrap" %}
```json
{
"tenantCode": "superdesk-123",
"expiry": 123 // optional - default 24 hours
}
```
{% endcode %}
**Mutation**
{% code overflow="wrap" %}
```graphql
mutation portalSessionCreate ($tenantCode: String!, $expiry: Int!) {
portalSessionCreate (tenantCode: $tenantCode, expiry: $expiry) {
errors
token
}
}
```
{% endcode %}
{% endtab %}
{% tab title="Node.js" %}
```javascript
res = await bunny.createPortalSession("superdesk-123");
```
{% endtab %}
{% tab title="Ruby" %}
```ruby
res = BunnyApp::PortalSession.create(
tenant_code: 'superdesk-123'
)
```
{% endtab %}
{% endtabs %}
On success the response will contain a token attribute. You need to extract this token and use it in the next step.
{% code overflow="wrap" %}
```json
{
"data": {
"portalSessionCreate": {
"errors": null,
"token": "eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE2ODE4MzY4NDUsImlzcyI6Imh0dHBzOi8vYnVubnkuYnVubnkuY29tIiwiYXVkIjoicG9ydGFsIiwiaWF0IjoxNjgxNzUwNDQ1LCJzdWJkb21haW4iOiJidW5ueSIsInVpZCI6NDA1LCJ1aWRfdHlwZSI6IlRlbmFudCIsInJlYWNoX2lkIjo1NDAsInJlYWNoX3R5cGUiOiJBY2NvdW50Iiwic2NvcGUiOiJwcm9kdWN0OnJlYWQgYmlsbGluZzpyZWFkIHN0YW5kYXJkOndyaXRlIHN0YW5kYXJkOnJlYWQiLCJvYmplY3RfaWQiOjQwNSwib2JqZWN0X3R5cGUiOiJUZW5hbnQifQ.78epnLpeJBs2UX1SrjxYdkKkEL_x4iy_AlAo6LuxQQkA7O5jvgEA00X3Zh9Z-MdLoBhGtSrK3Kv-Gb2lOAb3tQ"
}
}
}
```
{% endcode %}
### 2. Include the bunny.js script
```
https://cdn.bunny.com/v1/bunny.js
```
Include the Bunny script in the `` section of your application using the **subdomain** of your Bunny account.
{% code overflow="wrap" %}
```html
```
{% endcode %}
Now initialize the script by passing the portal token from step 1 into the Bunny SDK.
```html
```
Finally add a button or a link to your site for upgrading or managing a subscription with a click handler that we will use to popup the portal.
```html
```
### Controlling the display
You can popup different screens by setting a page argument in the `popup` method.
{% code overflow="wrap" %}
```javascript
// subscriptions - The default view
bunny.popup({
page: "subscriptions"
});
// transactions - Shows the transactions & payments made by the customer
bunny.popup({
page: "transactions"
});
// payment-method - Shows the current store payment method by the customer
bunny.popup({
page: "payment-method"
});
```
{% endcode %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.bunny.com/developer/customer-portal/popup-customer-portal.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.