Suggested cookie consent plugin?

I have been trying a few cookie consent plugins for React, but none seem to work well with Wasp (e.g., cookie-consent). As I am in EU, it needs to accept/decline the user consent. Is there any recommended package for it?
10 Replies
kapa.ai
kapa.aiβ€’2mo ago
Hi @Ricardo Batista. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not mention any specific cookie consent plugins recommended for use with Wasp. However, Wasp is a framework that works with React, so any React-compatible cookie consent plugin should theoretically work. If you're having specific issues integrating a plugin with Wasp, I would recommend posting a detailed question on the Wasp Github issues page (https://github.com/wasp-lang/wasp/issues) or reaching out to the community on Discord (https://discord.com/channels/686873244791210014/1206921679608090646). They might be able to provide more specific guidance based on your situation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Ricardo Batista, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
miho
mihoβ€’2mo ago
What were the troubles you saw with the mentioned plugin? 😊
Ricardo Batista
Ricardo Batistaβ€’2mo ago
It wouldn't load even when pasting the <head> tag in main.wasp and the <body> tag in App.tsx
miho
mihoβ€’2mo ago
Would you mind sharing some code examples with us? 😊 It'll be easier to debug for us
Ricardo Batista
Ricardo Batistaβ€’2mo ago
Sure, walking you through: 1) added the <body> JS import to App.tsx (see attached) 2) added stylesheet to <head> (see attached) 3) imported cookieconsent-config.js to /public
No description
No description
mindreaderlupoDO
mindreaderlupoDOβ€’2mo ago
https://www.npmjs.com/package/react-cookie-consent This one worked pretty easy for me
npm
react-cookie-consent
A small, simple and customizable cookie consent bar for use in React applications.. Latest version: 9.0.0, last published: 6 months ago. Start using react-cookie-consent in your project by running npm i react-cookie-consent. There are 79 other projects in the npm registry using react-cookie-consent.
miho
mihoβ€’2mo ago
Hey! The setup you provided worked for me with a slight change to the JS path πŸ™‚
miho
mihoβ€’2mo ago
No description
miho
mihoβ€’2mo ago
This was my Wasp file:
app cookie {
wasp: {
version: "^0.13.2",
},
head: [
"<script type=\"module\" src=\"/cookieconsent-config.js\"></script>"
],
title: "cookie",
client: {
rootComponent: import { RootComponent } from "@src/RootComponent",
}
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
component: import { MainPage } from "@src/MainPage"
}
app cookie {
wasp: {
version: "^0.13.2",
},
head: [
"<script type=\"module\" src=\"/cookieconsent-config.js\"></script>"
],
title: "cookie",
client: {
rootComponent: import { RootComponent } from "@src/RootComponent",
}
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
component: import { MainPage } from "@src/MainPage"
}
and this was my RootComponent
export function RootComponent({ children }) {
return (
<div>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.css"
/>
<h1>RootComponent</h1>
{children}
</div>
);
}
export function RootComponent({ children }) {
return (
<div>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.css"
/>
<h1>RootComponent</h1>
{children}
</div>
);
}
I think the trick is in the JS file url being /cookieconsent-config.js πŸ€·β€β™‚οΈ
Ricardo Batista
Ricardo Batistaβ€’2mo ago
Yup, I actually only needed to move the <body> tag to main.wasp:
"<script type=\"module\" src=\"/cookieconsent-config.js\"></script>"
"<script type=\"module\" src=\"/cookieconsent-config.js\"></script>"
Issue solved, thanks!