Best way to change 1 word's colour in the header title?

Ask the Community Customization
1

  • **Issue description: As title states, what would the best way to change the google reviews header title to have multiple colours? Trying to replicate below;
    **
    image

  • Link to the page with the widget in question:

1 Like
3

Greetings and welcome aboard, @Jamie4 :waving_hand:

To change the color of a specific word in the title, you should:

  • Add the code below to the Custom CSS field on the Style tab of your widget’s settings:
.highlight-word {
  color: orange;
}

  • Paste the following script to the Custom JS field on the Settings tab of your widget’s settings
const waitForElement = (selector, root = document) => new Promise(res => {
  const observer = new MutationObserver(() => {
    const element = root.querySelector(selector);
    if (element) {
      res(element);
      observer.disconnect();
    }
  });

  observer.observe(root, {
    childList: true,
    subtree: true
  });
});


waitForElement('[class*="WidgetTitle__Header-sc"]').then(headerText => {
  headerText.innerHTML = headerText.textContent.replace(
    /customers/i,
    '<span class="highlight-word">$&</span>'
  );
});

Do not forget to replace customers with the word you’d like to highlight in this part of the script:

image
image617Ă—354 20.7 KB

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website


Please try it out and let me know if it helped :wink:

1 Like