How to select categorical slicer to update embedded tile

I have enjoyed using this plugin and have successfully embedded both power bi reports and power bi tiles into wordpress pages using the plugin’s created shortcodes.

We now have a need to change an embedded tile’s slicer from our web page. I’ve been trying my best to learn from some of the filter posts in this plugin support area from a few years ago but the referenced links were deprecated and it doesn’t seem I am understanding the Microsoft documentation for Power BI embedded analytics Client APIs.

I have a script in the webpage HTML head to change the embedded tile when a time intelligence field is selected on the webpage (WTD, MTD, QTD, YTD) and a report refresh button is clicked. When I select and click, the original embedded tile disappears, I see the power bi logo pulsing and a new tile is embedded but unfortunately with the same data as before and the column header is now green. I want the data to change based on the slicer selection and no color changes to the slicer header.

Here is the javascript I am using:

// javascript code for refreshing the tile
function handleSlicerRefresh(event) {
    event.preventDefault(); // Prevent form submission
// Get the selected slicer value
var selectedValue =    document.querySelector('input[name="time_intelligence"]:checked').value;
console.log("this is the time intelligence selected", selectedValue);

// Create the variable slicers object based on the selected slicer value
var slicers = [{
   selector: {
      $schema: "https://powerbi.com/product/schema#visualSelector",
      visualName: "8daccedca2c143033cda"}, // taken from slicer visual 
   state: {
      filters: [{
      $schema: "https://powerbi.com/product/schema#basic",
      target: {
          table: "Time Intelligence", //table name in report
          column: "name"}, // field/column name
      operator: "=",
      values: [selectedValue]
           }]}}];
console.log("this is the slicer", slicers);

// Get pageURL as the iFrame src="url here" in the elements and layout of developer console.  Find container and drill down to find iframe
var pageURL = "https://app.powerbi.com/embed?dashboardId=<enter dashboardID>&amp;tileId=<enter tileID>&amp;groupId=<enter groupID>&amp;language=en&amp;formatLocale=en&amp;uid=gwuw1";
console.log("this is the pageURL", pageURL);
// Create the relatedURL with the filters attached
var relatedURL = pageURL + "?slicers=" + encodeURIComponent(JSON.stringify(slicers));
            console.log("this is the relatedURL ", relatedURL);
// Get the embedded tile iframe element
var embeddedTile = document.getElementById('tile_shortcode').getElementsByTagName('iframe')[0];

// Update the src attribute of the iframe with the relatedURL
embeddedTile.src = relatedURL;
}

I have a div id=’tile_shortcode’ in my html where I embed the original shortcode successfully.

I’m not really understanding the concept in the example provided by the plugin documentation for changing the slicer by appending the URL. I’ve been assuming the pageURL is the src for the iFrame. When I use the actual https://website-name.com/embedded-tile/ web page URL, I get the whole entire page embedded inside the iFrame with the headings, text and form selectors.

I feel like I’m almost there. I get successful console logs. I just don’t know how to use the var relatedURL to update the embedded tile. Hopefully someone has updated instruction to assist me. Thank you.