Cannot send props to Plasmic with react-email

Plasmic Studio Questions
1

I am using Plasmic with react-email but could not figure out a way to send any props to the template. Can someone point me to any docs

2

can you please explain what you’re trying to do

3

I just want to share props to email templates, for eg a user verification email has a button which contains a dynamic token that needs to passed down to button as a prop, how can we achieve this?

4

@tiago do you know how to do this (or maybe a team-mate)?

5

I am following this example https://github.com/plasmicapp/plasmic/blob/master/examples/react-email/pages/api/email.tsx
but couldn’t find any way to share props in readme

6

Hey @glorious_bedbug! Do you have the data you want to pass down to Plasmic in the file that is sending the email (i.e. https://github.com/plasmicapp/plasmic/blob/master/examples/react-email/pages/api/email.tsx)? If you do, a possible way to pass data down to Plasmic components is using DataProvider (https://docs.plasmic.app/learn/data-provider/), like:

  res.write(
    renderToString(
      <PlasmicRootProvider
        loader={PLASMIC}
        prefetchedData={plasmicData}
        prefetchedQueryData={queryCache}
        pageParams={pageMeta.params}
        pageQuery={req.query}
      >
        <DataProvider name="token" value={dynamicToken}>
          <PlasmicComponent component={pageMeta.displayName} />
        </DataProvider>
      </PlasmicRootProvider>
    )
  );

To access the token in your Plasmic project, you would use $ctx.token. Let me know if that works for your use case!

7

NO this does not work for me. Let me explain it better.
Let’s say I have this email template in my plasmic studio that I am hosting via next api routes https://plasmic-react-email.vercel.app/api/email?template=Basic
In this case how can I make the URL of the link dynamic by passing prop

8

You would like to pass a parameter in the URL like: /api/email?template=Basic&token=xxx, is that it?

9

Correct

10

You can first add a token URL query parameter in Plasmic studio, then add pageQuery={req.query} after pageParams={pageMeta.params} in line 35 of https://github.com/plasmicapp/plasmic/blob/master/examples/react-email/pages/api/email.tsx, and finally use your data like $ctx.query.token in Plasmic studio.

11

Docs about page query parameters: https://docs.plasmic.app/learn/dynamic-pages/#query-parameters

12

I don’t get it.
If the goal is to just design emails in plasmic studio and then allow the main application to access the templates, eg via a GET /email-template endpoint (that this external nextjs email-template app exposes ) - why does this nexjs app need dynamic pages?

13

@still_peacock, since the /api/email endpoint actually sends the email, I believe it makes sense to have some way to pass custom data to the template (for example, maybe you want to start the email with “Hello {FirstName}”). My first suggestion was for the API to contact the database, get the data and pass down to the template using DataProvider. The second suggestion, which I believe fits @glorious_bedbug’s use case better, is to pass the parameters via the URL. I think it’s a valid approach!

14

ah

15

Thanks, it worked