Wasp•7mo ago

Is there any contact us email integration?

I want to know if there is email integration, where user could send emails to the user over the website interface

15 Replies

Hi @skyblade2954. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, Wasp does provide email integration. You can easily integrate email functionality into your web application using Wasp's email-sending feature. You can choose from one of the providers such as Dummy (for development only), Mailgun, SendGrid, or the good old SMTP. Here is an example of how you can set up the email sender in your main.wasp file:

app Example {  
 ...  
 emailSender: {  
 provider: <provider>,  
 defaultFrom: {  
 name: "Example",  
 email: "[[email protected]]"  
 },  
 }  
}

app Example {  
 ...  
 emailSender: {  
 provider: <provider>,  
 defaultFrom: {  
 name: "Example",  
 email: "[[email protected]]"  
 },  
 }  
}

You can also define the defaultFrom field, so you don't need to provide it whenever sending an email. To send emails, you import the emailSender that is provided by the wasp/server/email module and call the send method on it. Here is an example:

import { emailSender } from "wasp/server/email";  
  
// In some action handler...  
const info = await emailSender.send({  
 from: {  
 name: "John Doe",  
 email: "[[email protected]]",  
 },  
 to: "[[email protected]]",  
 subject: "Saying hello",  
 text: "Hello world",  
 html: "Hello <strong>world</strong>",  
});

import { emailSender } from "wasp/server/email";  
  
// In some action handler...  
const info = await emailSender.send({  
 from: {  
 name: "John Doe",  
 email: "[[email protected]]",  
 },  
 to: "[[email protected]]",  
 subject: "Saying hello",  
 text: "Hello world",  
 html: "Hello <strong>world</strong>",  
});

The send method returns an object with the status of the sent email. It varies depending on the provider you use. For more details, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/advanced/email). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @skyblade2954, 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?

skyblade2954OP•7mo ago

@kapa.ai @Wasp Team Do you guys simple GUI interface tutorial for "Contact Us" page? With html and css?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but the provided knowledge sources do not contain a specific tutorial for creating a "Contact Us" page with a GUI interface using HTML and CSS in the Wasp framework. However, Wasp does provide a way to create pages using React components and you can style them using CSS or CSS frameworks like Tailwind CSS. Here is a basic example of how you can create a page in Wasp:

import React from 'react'

function ContactUs() {
  return (
    <div>
      <h1>Contact Us</h1>
      <form>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <label>
          Email:
          <input type="text" name="email" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  )
}

export default ContactUs

import React from 'react'

function ContactUs() {
  return (
    <div>
      <h1>Contact Us</h1>
      <form>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <label>
          Email:
          <input type="text" name="email" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  )
}

export default ContactUs

You can then style this page using CSS or a CSS framework of your choice. For more detailed information on how to create and style pages in Wasp, you can refer to the Wasp documentation (https://wasp-lang.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @skyblade2954, 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?

martinsos•7mo ago

Nope we don't offer a GUI for that, but as Kapa said, we do offer email sending, so if you create your own form and have it trigger a Wasp Action that sends email via email sender, that is it!

skyblade2954OP•7mo ago

@martinsos Yes, thank you I can do that, however you can also add it to your tutorial section. You made a GUI implementation for email authentication, you can also add this one too. Not a big deal. @martinsos It would be really easy for some people who don't know too much about react, would get a example page, it would improve their speed.

matijash•7mo ago

this could be a nice addition for Open SaaS, our starter kit (https://opensaas.sh)

Open SaaS

Free, open-source SaaS boilerplate starter for React & NodeJS.

skyblade2954OP•7mo ago

@matija I used this https://www.geeksforgeeks.org/create-a-contact-form-using-html-css-javascript/ and wrote one simple react html code. I removed several sections but it was usefull with simple validate function. Removed background etc. Let me share the file.

GeeksforGeeks

Create a Contact Form using HTML CSS & JavaScript - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

MEE6•7mo ago

Wohooo @skyblade2954, you just became a Waspeteer level 2!

skyblade2954OP•7mo ago

@matija

ContactUs.css

ContactUs.jsx

skyblade2954OP•7mo ago

You can remove the header and footer, it might be usefull for the Wasp tutorial section.

Sven•2mo ago

How did u send mails withbthis form From what email to which? Because now i send mails from myself to myself

skyblade2954OP•2mo ago

I can send from mail [email protected] to any mail address that mail address I got from probably mail service provider SENDGRID import { emailSender } from 'wasp/server/email'; import SendGrid from '@sendgrid/mail'; SendGrid.setApiKey(process.env.SENDGRID_API_KEY); export const sendGUIMailRequest = async (args, context) => { try { const { inputName, inputEmail, inputSubject, inputPhone, inputEmailBody, uploadedFile, } = args; // Server-side validation if (!uploadedFile.type.startsWith('image/')) { throw new Error('Invalid file type. Only images are allowed.'); } const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB if (Buffer.byteLength(uploadedFile.data, 'base64') > MAX_FILE_SIZE) { throw new Error('File size exceeds the maximum limit of 5MB.'); } const emailText =


Name: ${inputName}
Email: ${inputEmail}
Phone: ${inputPhone}
Message: ${inputEmailBody}

; const emailHtml =


<p><strong>Name:</strong> ${inputName}</p>
<p><strong>Email:</strong> ${inputEmail}</p>
<p><strong>Phone:</strong> ${inputPhone}</p>
<p><strong>Message:</strong></p>
<p>${inputEmailBody}</p>

; const msg = { from: { email: '[email protected]', name: 'customer', }, to: '[email protected]', subject: inputSubject, text: emailText, html: emailHtml, attachments: [ { content: uploadedFile.data, filename: uploadedFile.name, type: uploadedFile.type, disposition: 'attachment', }, ], }; await SendGrid.send(msg); return { success: true }; } catch (error) { console.error('Error in sendMailWithAttachment action:', error); throw error; } }; export default sendGUIMailRequest; //# sourceMappingURL=SendEmail.js.map My last code is like this I am sending images too

Sven•2mo ago

Yeah but like when a user fills in form You send a mail to urself or right? From what mail exactly? A different mail adress

NEROX•2mo ago

I had implemented a similar option without mail integration: https://toograded.com/contact-us and implemented the /admin/messages page

NEROX•2mo ago

export const createMessage: CreateMessage = async ({ firstName, lastName, email, message }, context) => {
  return context.entities.Message.create({
    data: {
      firstName,
      lastName,
      email,
      message
    }
  })
}

export const getMessages: GetMessages = async (args, context) => {
  return context.entities.Message.findMany({
    orderBy: {
      timestamp: 'desc'
    }
  })
}

Gaming

Programming

Is there any contact us email integration?