I am trying to modify the TrustPilot widget on my site.

The basic structure of the TrustPilot widget is:

#tp-widget_wrapper .tp-widget-wrapper
    #wrapper-top .wrapper-top
        #tp-widget-reviews-wrapper .tp-widget-reviews-wrapper hidden-element
            #tp-widget-reviews .tp-widget-reviews
                .tp-widget-review
                    .tp-widget-stars
                    .date

I am trying to hide the div .date.

What I have gotten so far is:

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0];
var date_tags = trustpilot_frame.document.getElementsByClassName("date");
date_tags.style.display = "none";

However I get the error:

Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined

The var trustpilot_frame is finding the iframe, I just can't access anything within it.

Edit

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0].contentDocument;
console.log(trustpilot_frame);
var date_tags = trustpilot_frame.getElementsByClassName("date");
console.log(date_tags);
date_tags.style.display = "none";

Console:

Edit 2

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0].contentDocument;
var style_tag = trustpilot_frame.createElement("style");
style_tag.textContent = ".date{display:none;}";
trustpilot_frame.getElementsByTagName("head")[0].appendChild(style_tag);
console.log(trustpilot_frame);

Console:

Edit 3

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0].contentDocument;
trustpilot_frame.onload = setTimeout(hide_dates, 10000);
function hide_dates(){

    // method 1
    var style_tag = trustpilot_frame.createElement("style");
    style_tag.textContent = ".date{display:none;}";
    trustpilot_frame.getElementsByTagName("head")[0].appendChild(style_tag);
    console.log(trustpilot_frame);

    // method 2
    var date_tags = trustpilot_frame.getElementsByClassName("date");
    console.log(date_tags);
    date_tags.style.display = "none";
}

Console shows the same as EDIT2 for the dom and the first EDIT for date_tags

I am trying to modify the TrustPilot widget on my site.

The basic structure of the TrustPilot widget is:

#tp-widget_wrapper .tp-widget-wrapper
    #wrapper-top .wrapper-top
        #tp-widget-reviews-wrapper .tp-widget-reviews-wrapper hidden-element
            #tp-widget-reviews .tp-widget-reviews
                .tp-widget-review
                    .tp-widget-stars
                    .date

I am trying to hide the div .date.

What I have gotten so far is:

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0];
var date_tags = trustpilot_frame.document.getElementsByClassName("date");
date_tags.style.display = "none";

However I get the error:

Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined

The var trustpilot_frame is finding the iframe, I just can't access anything within it.

Edit

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0].contentDocument;
console.log(trustpilot_frame);
var date_tags = trustpilot_frame.getElementsByClassName("date");
console.log(date_tags);
date_tags.style.display = "none";

Console:

Edit 2

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0].contentDocument;
var style_tag = trustpilot_frame.createElement("style");
style_tag.textContent = ".date{display:none;}";
trustpilot_frame.getElementsByTagName("head")[0].appendChild(style_tag);
console.log(trustpilot_frame);

Console:

Edit 3

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0].contentDocument;
trustpilot_frame.onload = setTimeout(hide_dates, 10000);
function hide_dates(){

    // method 1
    var style_tag = trustpilot_frame.createElement("style");
    style_tag.textContent = ".date{display:none;}";
    trustpilot_frame.getElementsByTagName("head")[0].appendChild(style_tag);
    console.log(trustpilot_frame);

    // method 2
    var date_tags = trustpilot_frame.getElementsByClassName("date");
    console.log(date_tags);
    date_tags.style.display = "none";
}

Console shows the same as EDIT2 for the dom and the first EDIT for date_tags

https://codepen.io/phallihan/pen/OdwgGd

• javascript
• html
• css
• dom
• trustpilot

Share Improve this question Follow edited Aug 17, 2019 at 10:13 halfer 20.3k1919 gold badges109109 silver badges202202 bronze badges asked Feb 13, 2019 at 10:20 Paddy HallihanPaddy Hallihan 1,70655 gold badges3333 silver badges8989 bronze badges 6

• Are you sure "trustpilot_widget" is an ID? For me it's a CLASS and the id is "trustbox". – Héloïse Chauvel Commented Jul 15, 2019 at 18:18
• @HéloïseChauvel Hey yeah think that was just my own container div but I can't remember I've totally changed how I was doing this. – Paddy Hallihan Commented Jul 16, 2019 at 14:52
• Ok, it was just in case you hadn't notice. Have you finally managed to edit the CSS of the widget? Because I tried the solution below but it doesn't work for me. – Héloïse Chauvel Commented Jul 16, 2019 at 18:15
• I achieved to access the iframe elements but I got a DOMException mentionning that it is possible to edit an iframe because of the same-origin policy. So I think it is just not possible to edit the Trustpilot widget CSS. I've sent a request to the support just in case, I'll keep you informed if they reply. – Héloïse Chauvel Commented Jul 16, 2019 at 22:17
• @HéloïseChauvel Yeah I tried it as well but couldn't manage it, its probably on purpose though to be fair like trustpilot is there to show trust so allowing people to potentially mess with their score isn't going to happen – Paddy Hallihan Commented Jul 17, 2019 at 7:43

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5 +50

To get the document of an iframe you need to use document.getElementById('iframe').contentDocumentyou should then be able to use getElementsByClassName

https://developer.mozilla/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

Your updated code would look like:

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0];
var date_tags = trustpilot_frame.contentDocument.getElementsByClassName("date");
date_tags.style.display = "none";

Update

Try the below to wait for the iframe to load.

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0];
trustpilot_frame.onload = function() {
    var date_tags = trustpilot_frame.contentDocument.getElementsByClassName("date");
    date_tags.style.display = "none";
}

I had the same issue, sometimes code would work in console, sometimes it wouldn't. But it boils down to being in an iframe and blocking any chance of XSS.

To amend anything on the Trustpilot side, it's through their end, not the frontend.

I did not want to do this but I am a lowly developer and my boss insisted. I was unable to do this via JS/CSS so ended up having to replace the snippet with my own slider and save reviews as images.