# Popup, side bar and modal options
You have the option to show your Chrome extension in a:
* Popup (the 'standard' chrome extension behaviour)
* Sidebar
* Floating modal
* Full-screen modal
**Please note:** note all of the features that come with the Charles plugin will work in all of these formats. You can see a full list of the plugin's features and the formats they are compatible with in the [Features Overview](https://cranford-tech.gitbook.io/charles/key-features/features-overview).
### Using a popup
#### App link
You'll need to replace the default URL that links the Chrome extension to the Charles test app, with a link to your own Bubble app. If you're using the **standard popup**, you'll need to replace the URL in line 4 of the popup.js script:
#### **Setting dimensions**
If you're using a Bubble app page with dimensions different to:
* width:320px and
* height:640px
you will need to adjust the dimensions in the popup.html file:
→ Open popup.html in any text editor and adjust the two numbers in line 7 ``.)
### Using a sidebar, floating modal OR full-screen modal
Here is how to change the opening action:
Open the `background.js` file in any text editor (we're using VS Code in the below example):
Read through the instructions, starting in line 5. Uncomment / adjust the source code accordingly.
1. Comment / uncomment the respective sections and save your changes. In the below example, we're uncommenting the section for the **Floating Modal**:
2. Adjust the modal sizes in the same lines.
3. Open `manifest.json` in any text editor and delete the full line '"default\_popup": "popup.html",' in manifest.json and make sure there is no empty line left.
**App link**
You'll need to replace the URL that links the Chrome extension to the Charles test app with a link to your own Bubble app.
* If you're using the **side bar**, you'll need to replace the URL in line 14 of the background.js script
* If you're using the **floating modal**, you'll need to replace the URL in line 21 of the background.js script
* If you're using the **full screen modal**, you'll need to replace the URL in line 28 of the background.js script
Make sure to start the URL with `https://`
---
# 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://cranford-tech.gitbook.io/charles/opening-actions/popup-side-bar-and-modal-options.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.
