Created
September 27, 2022 08:22
-
-
Save fjtorres/2b0c2e2fb3c23378eba0cb6dfa7fb5f6 to your computer and use it in GitHub Desktop.
These javascript functions will help you to customize Freshdesk widget when you are using the free tier. Basically these functions will add custom styles to launcher icon and override some stiles for the widget.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| async function redesignFreshdeskWidgetLauncher() { | |
| const frame = await waitFor('#launcher-frame', document); | |
| const frameHead = frame.contentDocument.getElementsByTagName("head")[0]; | |
| const new_style_element = document.createElement("style"); | |
| new_style_element.textContent = ".launcher-button, .launcher-button:hover, .launcher-button:active { background: none; background-color: #8CC448 !important; transition: none !important;animation: none !important;}" | |
| frameHead.appendChild(new_style_element); | |
| const button = await waitFor(".launcher-button", frame.contentDocument); | |
| button.addEventListener("click", (e) => { | |
| redesignFreshdeskWidget(); | |
| }); | |
| await redesignFreshdeskWidget(); | |
| } | |
| async function redesignFreshdeskWidget() { | |
| const frameWidget = await waitFor("#widget-frame", document); | |
| const frameWidgetHead = frameWidget.contentDocument.getElementsByTagName("head")[0]; | |
| const new_style_element_2 = document.createElement("style"); | |
| new_style_element_2.textContent = ".kbfwkc {background: linear-gradient(214.85deg, #8cc448 0%, #67912f 100%) 0% 0% / contain !important;}"; | |
| frameWidgetHead.appendChild(new_style_element_2); | |
| } | |
| function waitFor(selector, docToSearch) { | |
| return new Promise(resolve => { | |
| if (docToSearch.querySelector(selector)) { | |
| return resolve(docToSearch.querySelector(selector)); | |
| } | |
| const observer = new MutationObserver(mutations => { | |
| if (docToSearch.querySelector(selector)) { | |
| resolve(docToSearch.querySelector(selector)); | |
| observer.disconnect(); | |
| } | |
| }); | |
| observer.observe(docToSearch.body, { | |
| childList: true, | |
| subtree: true | |
| }); | |
| }); | |
| } | |
| redesignFreshdeskWidgetLauncher(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment