Wasp-lang•4mo ago

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•4mo 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•4mo ago

What were the troubles you saw with the mentioned plugin? 😊

Ricardo Batista•4mo ago

It wouldn't load even when pasting the <head> tag in main.wasp and the <body> tag in App.tsx

miho•4mo ago

Would you mind sharing some code examples with us? 😊 It'll be easier to debug for us

Ricardo Batista•4mo 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

mindreaderlupoDO•4mo 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•4mo ago

Hey! The setup you provided worked for me with a slight change to the JS path 🙂

miho•4mo 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•4mo 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!

Gaming

Programming

Suggested cookie consent plugin?