# Trigger the extension with a floating button

You can modify the source code so that a floating button is used to trigger a custom script that shows the Chrome extension. 

Check out the sample script customScript1.js which injects a yellow button into bubblehacks.io:

{% code overflow="wrap" lineNumbers="true" %}

```javascript
// Create a rounded floating button in the bottom right corner and inject into the DOM
let button = document.createElement("button");
button.innerHTML = "C"; // Button label
button.style.position = "fixed";
button.style.bottom = "20px";
button.style.right = "20px";
button.style.zIndex = "9999";
button.style.borderRadius = "50%"; // Makes the button round
button.style.width = "50px"; // Circle width
button.style.height = "50px"; // Circle height
button.style.lineHeight = "50px"; // Vertically align text
button.style.textAlign = "center"; // Horizontally align text
button.style.padding = "0"; // Adjust padding to 0 for alignment
button.style.backgroundColor = "yellow"; // Yellow background
button.style.color = "black"; // Black font color
button.style.border = "none";
button.style.cursor = "pointer";
button.style.boxShadow = "0 4px 8px rgba(0,0,0,0.3)"; // More prominent shadow
document.body.appendChild(button);

button.onclick = function () {
    // Send a message to background.js to open the iframe sidebar
    chrome.runtime.sendMessage({ type: "openIframeSidebar", url: url, width: width }, function (response) {
        console.log(response.status);
    });
};

```

{% endcode %}

This is how the yellow button will look on the page specified (in this case bubblehacks.io):

<div align="left"><figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FXduNtI2mK182M54i0uMu%2Fimage.png?alt=media&#x26;token=571daf6f-a8d2-47ac-8055-d3d53ee82645" alt=""><figcaption></figcaption></figure></div>

**Important:** Make sure the js file is  injected into the appropriate page and has appropriate host permissions by adjusting the manifest.js

<div align="left"><figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FKhZLzK89jG9VxSk0B7hJ%2Fimage.png?alt=media&#x26;token=489dec6e-baf0-41fa-b29f-2c007a47fe9f" alt=""><figcaption></figcaption></figure></div>

This only works for the sidebar or full screen modals. Not for the extension popup. If you need a popup, please adjust the sidebar CSS to make it look like a popup.