update email template

apps/formbricks-com/pages/docs/best-practices/feedback-box/index.mdx

@@ -126,7 +126,7 @@ window.formbricks = {
 };
 ```
 
-**Sending user data with feedback**
+<div id="add-user-email">**Sending user data with feedback**</div>
 
 The feedback box is built for in-app experiences. We assume that you already have user properties stored in a session object.
 

apps/web/src/lib/email-template.ts

@@ -25,6 +25,12 @@ export const withEmailTemplate = (content: string) =>
           background: #f4f4f4;
           padding: 2px;
         }
+
+        hr {
+          border-top: 1px dashed #94a3b8;
+          margin-top: 1rem;
+          margin-bottom: 1rem;
+        }
   
         table {
           width: 100%;
@@ -46,6 +52,23 @@ export const withEmailTemplate = (content: string) =>
           margin: 0 auto;
           border-radius: 12px;
         }
+        
+        .brandcolor {
+          color: #00c4b8;
+        }
+
+        .tooltip {
+          background-color: #f1f5f9;
+          padding: 1rem;
+          border-radius: 1rem;
+          color: #475569;
+          margin-top: 15px;
+          margin-bottom: 15px;
+        }
+
+        .tooltip a {
+          color: #1e293b;
+        }
   
         .button {
           background: #00c4b8;

apps/web/src/lib/email.ts

@@ -117,15 +117,21 @@ export const sendSubmissionEmail = async (
       .map(([key, value]) => `<p><strong>${key}</strong></p><p>${value}</p>`)
       .join("")}
 
+   
     <hr/>
-    
-    Click <a href="${
-      process.env.NEXTAUTH_URL
-    }/organisations/${organisationId}/forms/${formId}/feedback">here</a> to see the submission.
+
+    <div class="tooltip">
+    <p class='brandcolor'><strong>Did you know? 💡</strong></p>
     ${
       submission.customerEmail
-        ? "<hr/><strong>You can reply to this email to contact the user directly.</strong>"
-        : ""
-    }`),
+        ? "<p>You can reply to this email to start a conversation with this user.</p>"
+        : "<p>You can add the user email to the submission and then simply hit 'Reply to' to start a conversation with your user. <a href='https://formbricks.com/docs/best-practices/feedback-box#add-user-email'>Here's how.</a></p>"
+    }
+    </div>
+    
+    <a class="button" href="${
+      process.env.NEXTAUTH_URL
+    }/organisations/${organisationId}/forms/${formId}/feedback">View submission</a>
+    `),
   });
 };