Trustpilot: The function window.Trustpilot.loadFromElement does not exist in Safari

I am looking to integrate 3 TrustPilots into my Angular application.

import { Component, Input, OnInit } from '@angular/core';
declare global {
    interface Window { Trustpilot: any; }
}
 
window.Trustpilot = window.Trustpilot || {};

@Component({
    selector: 'app-trustbox-normal',
    templateUrl: './trustbox-normal.component.html',
    styleUrls: ['./trustbox-normal.component.scss']
})
export class TrustboxNormalComponent implements OnInit {

    constructor() { }

    ngOnInit(): void { }

    ngAfterViewInit(){
        const trustboxRef = document.getElementById('trustbox');
        window.Trustpilot.loadFromElement(trustboxRef);
    }

}

Everything is working smoothly on Brave and Firefox browsers, but when it comes to Safari, I encounter an issue:
window.Trustpilot.loadFromElement is not a function. (In 'window.Trustpilot.loadFromElement(trustboxRef)', 'window.Trustpilot.loadFromElement' is undefined)

Answer №1

After taking out

window.Trustpilot = window.Trustpilot || {};
from the script, Safari is now displaying it correctly.

Answer №2

Could be connected to the topic of implementing Trustpilot TrustBoxes in a Next.js environment, as discussed in this Stack Overflow thread

One potential solution could involve introducing a delay when calling the loadFromElement function to ensure that the Trustpilot JavaScript script has enough time to fully load.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is Typescript converting my keyof type to a never type and what steps can I take to resolve this issue?

Apologies if this question is repetitive, as I am new to TypeScript and struggling to identify related issues due to the complexity of some questions. The issue I'm facing involves TS coercing a type to never, which is confusing me. Here's the sc ...

The fuse box was to blame for triggering a GET request to http://localhost:4444/, resulting in the error message

I encountered an issue with fuse-box and P5.js where I received a GET http://localhost:4444/ net::ERR_CONNECTION_REFUSED. The complete code can be accessed on GitHub. The fuse.js file contains the following configuration: const { FuseBox, WebIndexPlugin ...

Working with Array of Objects Within Another Array in Angular 6 Using Typescript

I'm currently working with an array of "food": "food": [ { "id": 11, "name": "Kabeljaufilet", "preis": 3.55, "art": "mit Fisch" }, { "id": 12, "name": "Spaghetti Bolognese", "preis": 3.85, "art": "mit Fleisch" }, { "id": 1 ...

Beginner's Guide: Building your debut JavaScript/TypeScript library on GitHub and npm

I am looking to develop a simple JavaScript/TypeScript library focused on color conversion. Some of the functions and types I aim to export include: export type HEX = string; export type RGB = { r: number; g: number; b: number }; export type RGBA = { r: n ...

Properly transform a set of conditions from If statements to R.cond

I have a series of If statements that I need to convert to Ramda's conditional function. However, when I try to do so, I encounter an error saying that "Never is not assigned to Element." It seems like I am making a mistake somewhere: if (cond1) ret ...

The exportAs property for matAutocomplete has not been specified

Issue Detected An error occurred with the directive "exportAs" set to "matAutocomplete" ("-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"> I implemented code referenced from https://material.angular.io/components/auto ...

An issue occurred while attempting to retrieve Firebase data using an HTTP GET request

When trying to retrieve my data from firestore using an HTTP get request, I encountered an error. It might be helpful if my data in firestore was stored in JSON format. I'm not sure if this is feasible. <!DOCTYPE html> <html lang="en"> ...

"Encountering the error of 'require is not defined' in an Electron-React-Webpack-Typescript application when utilizing

When I add these lines to /src/renderer.ts in an Electron-React-Webpack-Typescript app: ipcRenderer.on('messageFromMain', (event, message) => { console.log(`This is the message from the second window sent via main: ${message}`); }); I encou ...

Clicking on the Angular Material Table will reveal the items for display

Only when I click on the table do items display. Upon initially loading the page, the table is empty for reasons unknown to me. I retrieve data from Rest-API Cloud Blobstorage and populate the empty Array with it. Check out the code snippet below: impor ...

Ways to extract a single value from a FormGroup

Is it possible to extract individual values from a form using JavaScript? JSON.stringify(this.formName.value) If so, what would be the best approach for achieving this? ...

Tips for effectively displaying a user's update or change

In my moments component, each moment is like a thread or post that users can like or dislike. When a user likes a moment, the momentService is called to retrieve the updated list and refresh the like count of that particular moment. However, updating all ...

Encountering memory leaks and displaying repetitive data due to having two distinct observables connected to the same Firestore

I am currently utilizing @angular/fire to retrieve data from firestore. I have two components - one serving as the parent and the other as the child. Both of these components are subscribing to different observables using async pipes, although they are bas ...

Choose a specific location on a vehicle illustration within a pop-up window. The image should be partitioned into 6 separate sections

I have a project for my client where they need to choose a car and then indicate where the damage is located on an image, which is divided into 6 sections. I'm struggling to figure out how to achieve this. I initially thought z-index would work, but ...

Troubleshooting the issue of "_this is undefined" in Angular 4

connect=()=>{ this.api=new trovaSDK_Init("normal",this.businessKey,"user","<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="364345534476515b575f5f1e19565d">[email protected]</a>","","","",this.apiCallBack,thi ...

Can the Rxjs library's Observables of() function be used to output multiple values?

I am inquiring about this because I came across in the Angular documentation that of(HEROES) returns an Observable<Hero[]> which emits a single value - an array of mock heroes. If I cannot use of(), do you have any alternative suggestions for me? I ...

Angular reactive forms are experiencing a setback where the value of '[value]' is not being properly set for controls

My scenario is as follows: <input #physicalAddress1 type="text" formControlName="PhysicalAddressLine1" /> <tfg-toggle #physicalAsPostal formControlName="PhysicalAsPostal" [onText]="'Yes'" [offText ...

Retrieve the input value from a Bootstrap Form Input

When using a Bootstrap Form Input to allow the user to enter text, I am wondering how to save that text and use it as a parameter in a function. Below is the HTML snippet I have: <!--Directory Input Form--> <div class="row"> <div class= ...

Using ngFor in Angular 6 to create a table with rowspan functionality

Check out this functional code snippet Desire for the table layout: <table class="table table-bordered "> <thead> <tr id="first"> <th id="table-header"> <font color="white">No.</font> </th> <th id="table-hea ...

Incorporate the pdfmake.js file into my TypeScript file

Working on a VSTS web extension and looking to utilize PDFmake.js to generate a pdf. The PDFmake.js file needs to be imported into the node_nodules folder by running npm install pdfmake. To import this JavaScript file into my TypeScript file, I'm fol ...

Tips for utilizing the JS attribute "offsetWidth" within Angular 4

I am attempting to retrieve the width of an element using JavaScript in my Angular application. document.getElementsByClassName("element")[0].offsetWidth; However, I keep encountering the following compilation error: Property 'offsetWidth' d ...