Hi @Peltzer! Thanks for your question. I’ve contacted our product team to see if they can help out with this. Stay tuned!

@Peltzer thanks for your patience. We’ll need to involve our support team for this one. Please open a support ticket (instructions on this page) and feel free to reply with the ticket # so I can escalate this to the appropriate team. Thanks again!

I’ve been in chats with support and that’s why I wanted to post on here. If anyone that sees this has had experience displaying Yotpo modules with a SPA website (React and/or NextJS a plus!) please share your solution. 

Noted @Peltzer! I can certainly re-flag this with our support team & I hope someone else from the community can help as well

Hi @Peltzer and @lstack , I ended up here from Google because my team is working on trying to implement some of the widgets in a NextJS application, and we haven’t had any luck so far. Have either of you found anything since this thread was started? I’ll share some details of what I’ve tried and what behavior I’m observing below.

I’m seeing that widget.js is loading and targeting my test widget (the badges widget) properly, since it appends the data-yotpo-element-id attribute, and window.yotpo.initialized is true. However, I’m not seeing any markup within the container div, so nothing is displaying for the widget. I have been able to verify that the badge loads and displays properly when I load a basic HTML file with the same markup and code, sans Next/React.

I figured that maybe Next was replacing the markup applied by widget.js during rehydration or something similar, so I also attempted to call window.yotpo.refreshWidgets() and then window.yotpo.initWidgets() in a couple of separate tests using a hook that runs after the app component mounts, but no luck there either.

I’m seeing this behavior both with dev mode + hot module reloading, and in a built version of the app. Ours is using static site generation.

Hi @t1k 

Yes, I found this documentation that helped with my NextJS react app.

https://support.yotpo.com/docs/implementing-yotpo-loyalty-referrals-modules-with-single-page-application-spa

Hmm, for some reason I’m still not seeing the badge display on my site. I’ve also tested this with the carousel widget and it isn’t displaying either.

Also, slight correction to my last post - when I tested the widgets on a non-React page, and the badge and carousel displayed correctly, I was using the app key for our production profile. I retried with the app key for our QA profile (which is the one I’m using on the Next app) and noticed that the widgets actually aren’t displaying there either.

I went back to the docs for the badge widget and noticed that at least 20 reviews are required for it to display, so I added some new ones since we were only at 14 at the time. We currently have 22 published reviews, but no luck yet. @lstack is there ever a delay between publication of the reviews and them displaying on the site?

I’m going to try using the app key for our production account (which has ~5,000 reviews) on the Next app and see if it works like it does on the non-React site I’m testing with.

Update: It is working with our production account’s app key on the Next app.