Automating Discord Onboarding & Role Assignment Using Discord.js

Ahmed Alsayad

26 July 2024

Over the past few days, I’ve been working on an exciting new feature that streamlines the process for users to join an exclusive Discord channel on this website.

This solution combines back-end development with front-end design to offer a seamless user experience.

The Challenge

Finding a Discord bot that can generate specific invite links and assign roles based on user joins is surprisingly challenging.

Despite extensive searches, I found no existing solutions that met these needs. This project aims to fill that gap by providing a custom solution that ensures a smooth, seamless user experience.

The Back-End Solution

Node.js Back-End — The Discord Bot

1. Premium Invite Link:
Users sign up via a site and receive a unique, time-limited Discord invite.

2. Smooth User Journey:
Upon entering their email, they get a link valid for 10 minutes and two uses. The two-use feature ensures the bot can detect which invite was used before it expires. (More on why two uses in the next point)

const invite = await channel.createInvite({
  maxUses: 2,
  maxAge: 600,
  unique: true,
});

3. Smart Detection:
One of the significant challenges was handling invite links that only allow one use. If the link is set to expire after a single use, it gets deleted immediately upon use.
This makes it impossible for the bot to detect which invite was used, and subsequently, impossible to assign the correct role to the new member.
So having the code stay in cache after first use allows the bot to detect which code was just used and then delete it; effectively making it a single use code.The bot tracks new members using the invite and grants them a premium role seamlessly once they join the server

4. Efficient Management:
The invite link is deleted after use to maintain exclusivity.

5.Email Integration:
As soon as the user clicks “Generate Link,” their email is stored in Sanity CMS for email marketing. Future updates will track invite usage and reflect premium user status in the CMS.

//This converts email to safebase64 string to act as unique ID for sanity collection of community members
function emailToSafeBase64(email) {
  return Buffer.from(email)
    .toString("base64")
    .replace(/\//g, "_")
    .replace(/\+/g, "-")
    .replace(/=+$/, "");
}

const newDoc = {
  _id: emailToSafeBase64(email),
  _type: "communityMembers",
  email: email,
  inviteLink: "",
  linkredeemed: false,
};
const createdDoc = await sanityClient.createIfNotExists(newDoc);

The Front-End Solution

NextJS Front-End — My Portfolio

The front-end design and user experience play a crucial role in making the whole process smooth and engaging. Especially the interaction design and animations for the generate link form

1. Consistent Design:
The UI maintains a dark, professional aesthetic that complements the overall look.

2. Interactive Animations:
The animations need to convery the feeling that there is some sort of linking going on. This helps the user understands the differnt states of the form; from an idle state to a loading state to a success state (or an error state)

3. Intuitive Button State:
The button changes color to blue when the link is ready, clearly indicating that it is available but also indicating that it will take you to a different webpage.

4.User Convenience:
To offer a better experience to the user Users can either click to go directly to Discord or use a “Copy to Clipboard” button for easy link copying without leaving the current page.

Future Improvements

Next steps include updating the CMS to reflect when a premium link has been used, marking the associated email as a verified premium user on the Discord channel. This will help maintain an accurate record of premium members and enhance email marketing efforts.

Conclusion

This project has been an exciting journey, combining back-end functionality with front-end design and animation to create a seamless user experience.
Stay tuned for more updates!

Feel free to reach out if you have any questions or suggestions. Happy designing! and coding..!

Want unlimited access to all source code & design files?

Join effekt.community now & get premium community access

Join Community