Laravel Email Editor Component using Livewire

Tech Stack: tailwindcss, alpine-js, livewire

Demo

Email Editor


Compiling Emails
Generating Preview

Subject :

Show / Hide User List
Compiling Selected Users

No User Selected

Attached Files

No files currently attached to this email

Select Attachments from existing files

Files of attached

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro

Usage


@livewire('email-editor')

Documentation

The EmailEditor component is a Laravel Livewire component that provides an interface for users to create and send emails. It allows the user to select recipients, add attachments, schedule the email, and even generate email content using GPT API. Here's a brief overview of its functionality and usage.

Component Properties:

  • $templateSubject: Uncompiled template subject.
  • $templateContent: Uncompiled template content.
  • $templates: List of templates.
  • $emailFrom: Email address of sender.
  • $emailFromName: Sender name.
  • $emailTo: Email address of recipient.
  • $emailCC: Email address of CC recipient.
  • $emailSubject: Compiled email subject.
  • $emailContent: Compiled email content.
  • $emailScheduledAt: Scheduled date and time for email sending.
  • $previewSubject: Preview of compiled email subject.
  • $previewContent: Preview of compiled email content.
  • $showScheduleModal: Flag for showing/hiding schedule modal.
  • $emailSent: Flag for showing/hiding success message.
  • $errorCompiling: Flag for showing/hiding error message.
  • $existingAttachments: List of existing attachments.
  • $newAttachments: List of new attachments.
  • $emailAttachments: List of attachments to be sent.
  • $users: List of available users to send email to.
  • $selectedUserIds: List of user IDs selected for email sending.
  • $selectedUsers: List of selected users for email sending.
  • $showGenerateEmailModal: Flag for showing/hiding GPT API email generation modal.
  • $emailPrompt: Prompt for generating email using GPT API.

Component Methods:

  • render(): Renders the component view.
  • mount(): Initializes the users property with all users.
  • compileAndRender(): Compiles the email subject and content and renders the preview.
  • compileAttachments(): Compiles the list of attachments to be sent.
  • compileSelectedUsers(): Compiles the list of selected users for email sending.
  • sendEmail(): Sends the email to selected users.
  • generateTemplateContent(): Generates email subject and content using GPT API.

Usage:

To use the EmailEditor component in your Laravel Livewire project, follow these steps:

  1. Add the EmailEditor component to your Blade view:
<livewire:email-editor />
  1. Include the necessary CSS and JavaScript files in your Blade layout file.
  2. Customize the component properties and methods according to your requirements.
  3. Use the component to create and send emails.

Note: You need to have GPT API credentials to use the generateTemplateContent() method for email generation.

Conclusion:

The EmailEditor component is a versatile and powerful tool for creating and sending emails in Laravel Livewire projects. Its ability to preview, compile, and schedule emails, as well as add attachments and generate email content using GPT API, makes it an essential component for any web application that requires email functionality.