Customizing the JS/CSS in a TrustPilot widget

Question

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

Are you sure "trustpilot_widget" is an ID? For me it's a CLASS and the id is "trustbox". — Héloïse Chauvel, Jul 15 '19 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, Jul 16 '19 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, Jul 16 '19 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, Jul 16 '19 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, Jul 17 '19 at 07:43
They replied to me today, they told me that it is possible but through their API. — Héloïse Chauvel, Jul 17 '19 at 16:14

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

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.org/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";
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 13 '19 at 10:25

Ginger Wizard

717
4
13

Thanks for your answer. Now I get `Uncaught TypeError: Cannot set property 'display' of undefined` I do `console.log(date_tags)` and I get `HTMLCollection [] length: 0` – Paddy Hallihan Feb 13 '19 at 10:35
@PaddyHallihan what does trustpilot_frame.contentDocument return as it could be a cross origin issue. Iframes are not very friendly when they are on different domains. – Ginger Wizard Feb 13 '19 at 10:47
I don't get a cross origin error and that returns the document but it appears in the console as empty, see edit above – Paddy Hallihan Feb 13 '19 at 10:56
As in I can expand the document but the head and body appear empty, I'm starting to think I should create a style element and just append it to the head maybe? – Paddy Hallihan Feb 13 '19 at 10:58
@PaddyHallihan Try the above update, I think the iframe has not finished loading when you are checking for the element. – Ginger Wizard Feb 13 '19 at 11:09
Thanks again for your help with this. That gives me the same `Cannot read property 'getElementsByClassName' of null` error I tried wrapping the create and append from my second edit in the onload function but it goes back to the first screenshot even though it did add the element without the onload function – Paddy Hallihan Feb 13 '19 at 11:16
@PaddyHallihan You may have to set an interval to wait for the element to appear within the iframe as it all depends on how trustpilot is loading the content into the iframe. Could you set up a preview of you code with the trustpilot widget? – Ginger Wizard Feb 13 '19 at 11:20
What kind of preview? like a live version? I've added another edit – Paddy Hallihan Feb 13 '19 at 11:34
@PaddyHallihan Yes a live version, you could do this on https://codepen.io/ – Ginger Wizard Feb 13 '19 at 11:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188348/discussion-between-ginger-css-wizard-and-paddy-hallihan). – Ginger Wizard Feb 13 '19 at 12:38

score -3 · Answer 2 · answered Feb 25 '19 at 11:23

-3

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.

answered Feb 25 '19 at 11:23

Paddy Hallihan

1,624
3
27
76

Customizing the JS/CSS in a TrustPilot widget

Edit

Edit 2

Edit 3

2 Answers2

Update