Need Amp support #1300

noumankhan95 · 2024-02-10T21:12:25Z

noumankhan95
Feb 10, 2024

Goals

we should be able to send amp emails as we do so using nodemailer

Background

like nodemailer we should be able to embed AMP components and send them to user like

<!DOCTYPE html>
      <html ⚡4email data-css-strict>
      <head>
        <meta charset="utf-8">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
        <style amp4email-boilerplate>body{visibility:hidden}</style>
        <style amp-custom>
          /* any custom styles go here. */
          .hide {
            display:none;
          }
          .show{
            display:block;
          }
        </style>
      </head>
      <body>
      
        <amp-state id="questionsState">
          <script type="application/json">
            {
              "selectedQuestion": 1
            }
          </script>
        </amp-state>
        <form
        action-xhr="https://emailmodo.vercel.app/api/receiveEmail"
        method="POST"
      >
        <input type="hidden" name="emailId" id="emailId" value=${emailId?.toString()} />
        <input type="hidden" name="uEmail" id="uEmail" value=${r?.toString()} />
        <!-- Question 1 -->
        <div class='show' [class]="questionsState.selectedQuestion >= 1 ? 'show' : 'hide'">
             <label style="font-size: 18px; margin-bottom: 10px; color: #333">
                        1. Would you love to partner with KNOTOPIAN for your outsourcing projects?
                      </label>
                      <h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
                        If Yes, use the calendar to set up a quick sync-up at your convenience to
                        discuss further.
                      </h5>
          <!-- Your question 1 content here -->
          <input type="date" name="question1"   on="change:AMP.setState({questionsState: {selectedQuestion: 2} })" />
        </div>
      
        <!-- Question 2 -->
        <div class='hide' [class]="questionsState.selectedQuestion >= 2 ? 'show' : 'hide'">
             <label style="font-size: 18px; margin-bottom: 10px; color: #333">
                          2. Trust us, you are missing a great deal already! Okay, would you give us
                          a chance to display our portfolio?
                        </label>
                        <h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
                          If Yes, use the calendar to set up a quick sync-up at your convenience to
                          discuss further.
                        </h5>
          <!-- Your question 2 content here -->
          <input type="date" name="question2" on="change:AMP.setState({questionsState:{ selectedQuestion: 3 }})" />
        </div>
      
        <!-- Question 3 -->
        <div class='hide' [class]="questionsState.selectedQuestion >= 3 ? 'show' : 'hide'">
           <label style="font-size: 18px; margin-bottom: 10px; color: #333">
                          3. Uhm, we still don’t want to miss a chance to let you know how much we
                          can help you! After all, we have a record of creating JAW-DROPPING
                          eLearning in just 7 days! Would you want to know how flexible is
                          Knotopian’s collaboration framework?
                        </label>
                        <h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
                          If Yes, use the calendar to set up a quick sync-up at your convenience to
                          discuss further.
                        </h5>
          <input type="date" name="question3" on="change:AMP.setState({questionsState:{selectedQuestion: 4} })" />
        </div>
      
        <!-- Question 4 -->
        <div class='hide' [class]="questionsState.selectedQuestion >= 4 ? 'show' : 'hide'">
         <label style="font-size: 18px; margin-bottom: 10px; color: #333">
                          4. Ouch! Give us a FEW minutes and SAVE huge! You won’t regret. Just
                          letting you know our team will be available 24x7 to supporting your needs.
                          Cool, let’s think of the partnership later. But, how about a quick sync-up
                          to just know us better?
                        </label>
                        <h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
                          If Yes, use the calendar to set up a quick sync-up at your convenience to
                          discuss further.
                        </h5>
          <input type="date" name="question4" on="change:AMP.setState({questionsState:{selectedQuestion: 5} })" />
        </div>
      
        <!-- Question 5 -->
        <div class='hide' [class]="questionsState.selectedQuestion >= 5 ? 'show' : 'hide'">
           <label style="font-size: 18px; margin-bottom: 10px; color: #333">
                          5. We just WON a LearnX Gold Award for one of our innovative learning
                          solutions. Just letting you know! And yeah, we still want to meet you.
                          After all, we both work towards the same goal – Creating Impactful
                          Learning.
                        </label>
                        <h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
                          If Yes, use the calendar to set up a quick sync-up at your convenience to
                          discuss further.
                        </h5>
          <input type="date" name="question5" />
        </div>
      
      </form>
      
      </body>
      </html>

Proposal

using the above example if you test in amp playground , u can see what i did , there.i believe amp support should be enabled to fully leverage the power of this package

Andrew-Chen-Wang · 2024-02-26T07:58:57Z

Andrew-Chen-Wang
Feb 26, 2024

This would be a blessing. I'm new to AMP, but excited for it. I think a new package would have to be made though. The AMP components simply react differently compared to regular react-email components. For instance with AMP state:

<p class="center">About <span [text]="myState.cats[currentCat].name"> Aakash</span></p>

i'd love to have this typed properly in React. How would this look? Not sure. Where would you define AMP State to begin with? I'm not a great TS developer, but again this would be amazing and would totally complete this library.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Need Amp support #1300

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Need Amp support #1300

Uh oh!

noumankhan95 Feb 10, 2024

Goals

Background

Proposal

Replies: 1 comment

Uh oh!

Andrew-Chen-Wang Feb 26, 2024

noumankhan95
Feb 10, 2024

Andrew-Chen-Wang
Feb 26, 2024