> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/charles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/charles/opening-actions/popup-side-bar-and-modal-options.md).
# 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](/charles/key-features/features-overview.md).
### 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://`