DEV Community

Avinash Krishnan
Avinash Krishnan

Posted on

Template Exchange & Instant Support: EmailJS Integration

Free Website Templates: Your Launchpad to Creativity

Central to our platform is our extensive library of free website templates. Whether you're creating a personal blog, a portfolio site, or an e-commerce store, we have a template to suit your needs. Our templates are meticulously crafted by expert designers and developers, ensuring both aesthetic appeal and functionality.

But we don't stop there. We believe in the power of community and collaboration. That's why we offer you the opportunity to contribute your own website templates to our collection. Share your creativity with the world and help fellow developers kickstart their projects. Together, we can build a diverse and vibrant ecosystem of web templates for everyone to enjoy.

Chatbox Support: Your Personal Guide in the World of Web Development

Navigating the intricacies of web development can be daunting, especially for beginners. That's where our Chatbox support comes in. Embedded directly into our platform, the Chatbox is your direct line to our support team. Whether you have questions about template selection, need assistance with customization, or want to contribute your own template, we're here to help.

Our Chatbox is more than just a messaging tool. It's a gateway to personalized assistance, real-time guidance, and a supportive community of developers. No question is too big or too small. We're dedicated to empowering you on your journey to becoming a proficient web developer.

How It Works:

Getting started is easy. Simply browse our collection of free website templates, choose the one that suits your project, and start customizing. If you have questions along the way, click on the Chatbox icon to connect with our support team instantly. We're here to provide guidance, answer your queries, and ensure your experience on our platform is nothing short of exceptional.

Chatbox Implementation:

Image description

Image description

Image description

Email would look like this:
Image description

Code To Implement EmailJS:

Step 1: Run npm i emailjs in your vscode terminal.
Step 2: Paste this one line above the end of body tag.
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
Step 3: Create an account in emailJS
Step 4: Click on Add New Service option
Step 5: Click on Gmail.
Step 6: Connect your gmail account and then click on Create Service.
Step 7: Now click on Email Templates on the left hand side
Step 8: Click on Create New Template.
Step 9: For my project I entered my email Id in right hand side in To Email option and my name in From Name option. You can edit the contents as per your requirement.
Stuff written as {{from_name}} are variables
Step 10: Paste this code in a new javascript file and link that file to your HTML.

(function () {
    emailjs.init(""); //Paste your public key available in account details
  })();
  var params = {
    sendername: "", //Fetch the value from user and pass it in these variables
    to: "",
    message: "",
  };

  var serviceId = ""; //Paste your service ID available in Email Services 
  var templateId = ""; //Paste your template ID available in Email Templates->Settings
  emailjs
    .send(serviceId, templateId, params)
    .then((res) => {
      alert("email sent successfully");
    })
    .catch();
Enter fullscreen mode Exit fullscreen mode

Website Templates:

Image description

Upload Template:

Image description

Image description

Image description

Key Features:

User-Friendly Interface: The Chatbox is designed to be intuitive and easy to use, even for those new to web development.
Instant Communication: No more waiting around for email responses. With the Chatbox, you'll get real-time support whenever you need it.
Query Logging: We keep track of all Chatbox interactions, so you can easily refer back to previous conversations if needed.
Email Notifications: Receive email notifications for every Chatbox interaction, ensuring you never miss a response from our team. Implemented using emailjs.

Technology Stack Used:

Frontend:
HTML, CSS, JavaScript: The building blocks of our website, ensuring a smooth and interactive user experience.
Backend:
Node.js, Express: Powering the backend of our platform, providing the foundation for our Chatbox feature.
Database:
MongoDB: Storing and managing user data and Chatbox interactions, keeping everything running smoothly behind the scenes.

Why It Matters:

Our platform's provision of free website templates and user-contributed templates, alongside Chatbox support, is pivotal for beginner developers. These resources offer accessible, high-quality starting points, democratizing web development. By fostering community collaboration and providing real-time assistance, we empower developers to overcome obstacles efficiently, accelerating their learning curve and facilitating the realization of their creative visions.

Live: https://designusability.netlify.app/
Github:https://github.com/Krishnan-Avinash/design-website

Top comments (2)

Collapse
 
xr0master profile image
Sergey Khomushin

Thanks for the article.

Please note, this link — cdn.emailjs.com/dist/email.min.js — is absolutely outdated, uses a very old SDK, and will soon stop working.

Collapse
 
avinash_krishnan profile image
Avinash Krishnan

Thank you for bringing that to my attention. We'll update the link promptly to ensure uninterrupted service.