This code seems to be not working anymore. Can I get a help? (I have been used this code on my site and it used to work.)
Hi there, @user12542 
Could you please send me a link to the page, where the widget is installed? Also, please send me a screenshot of the button used as the episode trigger 
Hello 
To prevent any interference from other elements, I created a separate test page.
Even in an isolated environment, I confirmed that the code above still doesn’t work as expected.
Test page: MENTAL PLACE
Since there’s only a single button labeled “Episode Test 02” on this page, I’ve skipped attaching a screenshot.
Here’s what I would like the widget to do:
1.
When visiting mental.place/elf?title=Test%20Episode%2002, I’d like “Test Episode 02” to be selected automatically — but not start playing immediately.
2.
When I’m already on mental.place/elf, and I click a separate trigger button for “Test Episode 02”, I’d like the widget to switch to “Test Episode 02” and start playing right away — without refreshing the entire page.
Thank you very much, and have a great day!
1 Like
Thanks for sharing the link, @user12542!
As far as I see, you’re using the Audio Player widget and this was a code for the Podcast Player widget.
I’ve forwarded your request to their devs, and they’ll try to implement a trigger on button click for your widget 
Thank you for waiting, @user12542!
To implement your use case, we’ve completed the following steps:
After that, we've hidden the Playlist with the CSS code
We’ve used this code in the Custom CSS field on the Style tab of your widget’s settings:
.global-styles,
[class*="PlaylistButton__PlaylistButtonComponent-sc"] {
display: none !important;
}
Finally, we added the code to open a specific track on the button click
This code was placed in the Custom JS field on the Style tab of your widget’s settings:
const TARGET_TITLE = 'Test Episode 02';
const BUTTON_SELECTOR = 'a[href="/elf?title=Test%20Episode%2002"]';
function listener(selector, callback) {
const firstTarget = document.querySelector(selector);
if (firstTarget) {
return callback(firstTarget);
}
const observer = new MutationObserver((_, observer) => {
const targetNode = document.querySelector(selector);
if (targetNode) {
observer.disconnect();
callback(targetNode);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
function normalizedTitle(title) {
return title.toLowerCase().trim();
}
listener('[class*="Playlist__Component-sc"]', (playlistContainer) => {
const titles = playlistContainer.querySelectorAll(
'[class*="PlaylistItem__Title-sc"]'
);
const targetTitle = Array.from(titles).find(
(title) =>
normalizedTitle(title.textContent) === normalizedTitle(TARGET_TITLE)
);
if (!targetTitle) {
return;
}
const playlistButton = targetTitle.closest(
'[class*="PlaylistItem__PlaylistItemComponent-sc"]'
);
const button = document.querySelector(BUTTON_SELECTOR);
button.addEventListener('click', (e) => {
e.stopPropagation();
e.preventDefault();
playlistButton.click();
});
});
In the 1st line of the code, we’ve set the title of the track that should be opened.
In the 2nd line, we’ve added the selector of your custom button.
Please check it out and let me know if you like the result 
1 Like
Thank you sincerely. The code and instructions you provided were extremely helpful and greatly contributed to my work.
I have one more thing I could use your help with.
Currently, when I set “minimized by default” in the settings, it applies to both PC and mobile. However, I would like to have the player appear in expanded mode on PC and minimized mode on mobile.
Would it be possible to get some guidance on how to achieve this?
Thank you again for your continued support and assistance. I truly appreciate it.
2 Likes
Sure! We’ve added this code to the existing script in the Custom JS field:
if (window.innerWidth <= 480) {
listener("[class*='MinimizeButton__StyledButton-sc']", (minimizeButton) => {
minimizeButton?.click();
});
}
Please check it out and let me know if you like the result
Actually, I managed to complete a working version of the code before receiving a relply.
However, it ended up being quite complex, so I tried replacing it with the code you provided — but unfortunately, it didn’t work as expected.
Could you kindly take a look?
I’d like the code to work not only when the page loads, but also when resizing crosses the 600px breakpoint.
For reference, I’ve attached the version I wrote, which is fairly complex but does function properly.
I believe there’s a much cleaner way to achieve this — and I truly appreciate any help you can offer in simplifying it. Thank you in advance!
// Button selectors (includes up to -sc in class name)
const portraitBtnSelector = '[class*="MinimizeButton__StyledButton-sc"]';
const landscapeBtnSelector = '[class*="MinimizedPlayer__StyledInfo-sc"]';
// Store previous state
let wasPortrait = window.innerWidth <= 600;
// Common function (runs when crossing the 600px threshold)
function applyLayoutOnThresholdChange() {
const isNowPortrait = window.innerWidth <= 600;
// ✅ Execute only when crossing the 600px threshold
if (isNowPortrait !== wasPortrait) {
wasPortrait = isNowPortrait;
if (isNowPortrait) {
const portraitBtn = document.querySelector(portraitBtnSelector);
if (portraitBtn) portraitBtn.click();
} else {
const landscapeBtn = document.querySelector(landscapeBtnSelector);
if (landscapeBtn) landscapeBtn.click();
}
}
}
// ✅ Run once after widget is detected (condition: when width is over 600px)
const widgetObserver = new MutationObserver(() => {
const player = document.querySelector('[class*="MinimizedPlayer__StyledPlayer-sc"]');
if (player) {
if (window.innerWidth > 600) {
const landscapeBtn = document.querySelector(landscapeBtnSelector);
if (landscapeBtn) landscapeBtn.click(); // ✅ Force click on initial load
wasPortrait = false; // Update state
}
widgetObserver.disconnect();
}
});
widgetObserver.observe(document.body, { childList: true, subtree: true });
// ✅ On resize: only run when crossing the 600px threshold
window.addEventListener('resize', applyLayoutOnThresholdChange);
1 Like
Okay, I’ve passed your request to the dev team!
I’ll report back once any news comes up
1 Like
Hi there, @user12542
Devs confirmed that your code is great and slightly adjusted it:
const SELECTORS = {
PORTRAIT_BUTTON: '[class*="MinimizeButton__StyledButton-sc"]',
LANDSCAPE_BUTTON: '[class*="MinimizedPlayer__StyledInfo-sc"]',
PLAYER: '[class*="MinimizedPlayer__StyledPlayer-sc"]'
};
const MOBILE_WIDTH = 600;
let wasPortrait = window.innerWidth <= MOBILE_WIDTH;
function onElementReady(selector, callback) {
const observer = new MutationObserver((_, observer) => {
const targetNode = document.querySelector(selector);
if (targetNode) {
observer.disconnect();
callback(targetNode);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
function handleResize() {
const isPortrait = window.innerWidth <= MOBILE_WIDTH;
if (isPortrait === wasPortrait) return;
wasPortrait = isPortrait;
const selector = isPortrait
? SELECTORS.PORTRAIT_BUTTON
: SELECTORS.LANDSCAPE_BUTTON;
document.querySelector(selector)?.click();
}
onElementReady(SELECTORS.PLAYER, () => {
if (window.innerWidth <= MOBILE_WIDTH) return;
wasPortrait = false;
document.querySelector(SELECTORS.LANDSCAPE_BUTTON)?.click();
});
window.addEventListener('resize', handleResize);
If you have any questions left or any assistance is needed, please let me know. I’ll be happy to help
1 Like