Ticket System + Transcripts | Discord.JS V13 Series | #20

this is how your system will be looking like after we're done with this episode you're gonna have a message with three buttons whenever you click on a button a ticket is gonna open up and you're gonna be getting tagged inside of it and now here you have the option of locking the tickets closing it for the ticket opener and then unlocking it and then if you want to save that transcript as an html file you can save and close ticket just like this let's type a random number now if i click on save and close the transcript would be generated in this channel now here we can download it and then we can open the file and here we will see all the messages that were sent in the channel so thank you guys for clicking on this video and i hope to i hope you enjoy it alright so let's start off by creating a schema so we're going to go ahead to our schemas folder we're going to create a new file and call it ticket.js so whatever you want to call it and here we're going to require some properties from the mongoose package by the way guys if you see my code moving while i'm saving it's because i'm using prettier it's an extension if you want to have it you can download it from the extensions market right so we're gonna require model and we're going to require scan then we're going to model export so we can use it outside of the scopes model sorry just like this the name of it's going to be for example tickets you can name it whatever you want and we're going to create a new schema or a new instance of a schema so the first thing that we're going to be saving is the guide id you won't be using it in this episode this is going to be used in part 2 where we make our ticketing system a global ticketing system so if you want that if you want that episode to come out let's get this video to 50 likes and we'll make it happen all right so guideline then we're going to be sorting the member id basically the member that click or i open the ticket then ticket id it's going to be storing a random generated ticket id for every ticket then channel id it's going to be also a spring the channel where the the ticketing channel sorry and now here we're going to have a closed bolon as you have seen in the beginning of the video we have we could close the channel and then we could lock it so lot is also going to be and then we're gonna store the type of the tickets because it's hard coded so we want um we're gonna be able to know the types all right so now that the schema is finished that's all we need from the database we're gonna close out of this folder now let's create our command um or actually before we create our command we're gonna be it storing a couple of details so let's go to our convict file don't worry i'm gonna blur my configs out let's go to discord and let's go to our server settings and what we need to do is go to our roles edits and grab the id of the at everyone role so let's copy id if you don't see that a copy id just enable developer mode in your user settings once we have done that we're gonna go to our config file and we're gonna set a new value it's gonna be called everyone id and we're going to paste the id that we copied over here once that is done let me delete this message real quick all right so like you see here i've already created a ticket system category and open ticket channel and transcript transcripts channel go ahead and open them now um and once you have you created them copy the id of the category all right so let's copy it and let's place it here we're going to call it for example parent id you can name the values whatever you want as long as you remember them then we're going to copy the id of the open ticket channel all right so we're going to go ahead and create a new value and we're going to call it for example opel open tickets all right and last but not least the transcripts we're gonna copy the id of it and we're gonna save it so transcripts id is going to be this id is pretty simple so far and don't worry guys if you want to make this a system a global command like i said get this video to 50 likes and i will make it happen so let's close out of our convict and now that we're done we're going to create our command so the first command is going to be to send the actual creation message so let's go to our commands folder let's create an under our systems and we're going to call it ticket.js for example and here we're gonna require a couple of properties from the discord package so required sorry discord.js and now we're gonna grab the messaging bit sorry message embed command interaction and message action row where is it action rule and then message button that's all we need and then we're going to go down a couple more lines or actually here we're going to require some fonts require config slash dot slash structure slash config or wherever you paste it and here we can grab the channel id the actual channel that we're gonna be sending the buttons to uh so we're gonna grab we name the channel idea i think or open ticket channel id uh and now we're gonna go down model exports do the same usual stuff the name of the command is going to be ticket for example description is going to be set up your ticket message it's all going to be hard coded and once we make it global we can be utilizing the options of the commands and the database all right so permission it should be administrator otherwise your 1000 discord members will be spamming this command and then we're going to be have you know async execute we won't have any options because it's basically hardcoding stuff uh the first thing that we're gonna be doing is actually creating embed so const embed sorry but equals to new message embed all right we're going to set the color of the embed to be or we're going to set the author so let's set the author first let's set it to be for example um let's grab the guide object from the interaction so bones equals interaction and the set author is going to be guide.name we forgot to grab our parameter also all right let's grab our parameter command direction all right so guide dot name and then a plus we can add a plus sign say ticketing system for example or ticket system whatever you like it to be and then we're gonna have guide dots icon url and dynamic in case it's a gif right so now that we have set up our author and i will set the description so let's remove this column so set description the description is going to be for example open take it to this course any of the issues listed on the buttons you can customize this as much as you would like and then let's set the color of it i would like the normal discord black or whatever so it's going to be hashtag three six three nine three f i think all right uh and now we're gonna create our buttons so what we need to do is that const buttons equals new message action row all right and then here we're going to type buttons dot add component and inside of this rounded brackets we're going to create curly brackets or actually we don't need to do that so we're going to type new message button all right we're gonna set the custom id of it let's say let's say this is for a player report we're gonna set it to be player all right and then we're gonna set label the actual name of the button to be layer report and then we're going to set um style the set style primary for example and then set emoji you can have custom emojis and and to get the custom immersion basically i think this slash and then emoji name let's say what emojis do we have let's see here uh theta all right and here you can get the idea of it this is the id but now we're going to be using normal emojis sorry sets emoji we're going to be using the emojis that windows provides to us so let's sorry i don't know what's happening with me and my keyboard today all right so windows dots and we can get here let's say for example this red ticket all right so now we're done with this we're going to put a comma at the end of this line and now we're going to create another message button we're going to create three just for example you can create five per component all right so set custom id you can copy actually this let's copy it all right let's go instead of custom id player it's going to be for example bug for bug reports so report and this is going to be a say secondary and let's change the emoji to be a bug there we go all right and now for a third one let's put a comma here and change the custom id for example to support or actually other let's make it other and other report and let's set this to be for example what options do we have let's set it to be for example success whatever and remove this and add another emoji let's say this one all right so now that we created our buttons all that we need to do is send the actual message along with the embed and the buttons pretty simple we're going to go down and what we're going to do is we're going to await guide those channels the cache those the fetch or we're gonna get actually get and here we're gonna grab the id or the open ticket channel that we saved the id of in the config and then we're gonna do it send all right we're gonna send embeds is gonna be sorry embeds it's gonna be embeds and then component it's gonna include the buttons just like this and because we're sending a message here we will have some way we need to reply to the interactions we don't get interaction field and to do that is pretty simple we're going to type interaction dot reply content and let's say for example done make it a thermal and that's it if you have a better way of doing this go ahead and do it right so so far let's try it out so let's start the boat all right take it loaded all right let's go to discord let me remove this and now let's type in the transcript channel for example slash ticket and it says done if you go to the open i take it we should see the embed now open it take discuss and here we have our buttons but if you press on any of them it's going to interaction fail because we're not really listening or responding to these buttons all right so now let's do it for that we're going to be needing um an event listener so let's go to our events folder we're going to make a new folder called ticket for example and then here we're going to create the initial uh ticket respond so let's call it for example in the shell ticket dot js and then here we're going to require a couple of objects from this code package so let's require this code so cheers i don't know why i'm sucking up typing today either way uh we're gonna grab button interaction all right a message embed and message action rule because we're going to be creating new button button sorry and message button pretty simple all right now we're going to require the information database so cons dp equals required total structures for example schemas and ticket the one that we created in the beginning of the video all right now that is done we gonna require a couple of ids from the config the ones that we saved so required slash structures config.json and what we need to require is the category ready which is the parent id and the everyone id that we saved and also the beginning of the video pretty simple so far um all right now we're gonna model those exports we can listen on the name or on the message create not message create sorry interaction create right and then we're gonna we can grab the parameters for it so there's actually async execute versus a little bit easier all right just like this now let's grab our parameters and if you guys wonder why we do this it's just because we can get for example look interaction dot here we can have the properties of the interaction object but if you remove this we won't have them all right so that's the only reason we are using this you can remove it if you want all right so we're going to check here um an interaction create when this event gets emitted it can be a command interaction or button interaction or select manufacturing it can be an instruction so we're going to filter out the interactions we're going to type if exclamation mark interaction note is button we're going to return so if it's not about an interaction then we're gonna exit out to this file all right and now we're gonna because if you look at the tickets we created uh our three buttons and we have the custom ids of the buttons first one player bug and other remember this we're gonna go to the initial tickets and here we're gonna create an array we're gonna or actually let's grab a couple of overlays first guide member and custom id equals interaction all right it's custom id and here we're going to check so if exclamation mark and here we're going to keep it in array and if we have hit player bug other layer bug other dot includes custom id sorry custom i why isn't it sorry custom id just like this awesome id then we're gonna return so if this array doesn't have whatever the customized id of this button if it doesn't have it then we can also exit out of the code so we're only listening on these buttons oops all right so now that that is done um what we're going to be doing is creating or generating a random id and to do that we're going to have cons id and then we're gonna math.floor and we're gonna math dot random times let's say for example 90 000 just like this and then plus 10 000. i think it was like this all right hopefully uh and now we're gonna await all right we're gonna guide those channels don't create so we're gonna create the actual ticket channel and the name of the tickets is going to be order channel is going to be let's say for example custom id plus we're going to add a dash and here we're going to add the actual id that we just renamed so it's going to be it's going to be generating a new id each time this button is pressed all right then we're going to create an object outside of this backticks and here we're going to select the type of the channel to be guild a text all right and then we're gonna select the parent of the channel basically the category channel to be the permanent id that we put in at the beginning of the video inside of our config and then now we can a permissions overwrite and for that we'll create an array and an array of objects basically and the first one that we're going to be allowing is the actual member id the one the person that clicked the button all right so in here we're going to type that low and it's also going to be an array we're gonna allow send messages we're gonna load view channel and then read message history all right and now because we don't want everybody in the server to to see that they get we only want the member and the admins for example we're going to create a new object the idea of it is going to be the everyone id that we copied in the beginning of the video and here we're going to deny and also an array of permissions and we can deny them use channel uh let's copy this we can deny all of this so pretty simple so far um all right so now that we have created a channel we're gonna type dot then and here we're going to copy or type shannon for actually less async because we're going to be using a weight async channel so this channel means whenever this channel is created we're going to grab the channel object so channel sorry i was cracking uh whatever all right so here now we're gonna await dp.create so we're gonna create a new document inside of the database and here we're gonna have the object so member id or we can save the guide id also for the future video god id is going to be a guide id all right a member id is going to be member id and then and then take it id is going to be id the one that we generated the channel id is going to be the channel that we just created load id and let's see here what we have left closed is going to be false because it's not going to be closed when we open it false loop is also going to be false and then the type of it is going to be the same as the custom id all right so here so far what we did is listened on the buttons created that generated a random id and we created a channel and then modified its permissions and we created a new document inside of our database alright so now once that is done we're going to go out and we're going to create a new embed so we're going to type embed equals the new message embed and then we're going to set the author of the embed to be let's see what we can set it to be guild dot name plus or what you can do let's do it with practice a little bit better so guide name and and put the space and this whatever character and here it's gonna be having the id all right and then we're gonna set the guide icon so guide those icon url dynamic true just like this and what we can do now also is type let's remove this whatever description please wait patiently for a response i pro i probably wrote all of these wrongs but whatever put him in the comments it responds from the staff team in the mean while describe your issue in as much detail as possible a long-ass message all right so uh very good now and because we're going to be sending buttons inside of that embed what we're going to be doing is types called set footer and here we're going to say the buttons below are staff only buttons and let's go up here and type because we forgot to do that um let's say if exclamation mark member dot permissions dot has administrator for example then we're gonna return interaction dot reply content and um or wait no no this should be shouldn't be here remove this remove this this is for the next file sorry guys um alright so stop buttons that's all right now we're gonna go down here we're gonna create a button so cons buttons equals to new message action row and let's go down here and now here we're gonna type buttons add components let's scroll down and what we can do let's go to our ticket file copy all of these we can edit them copy right so the first custom id is going to be basically close and the label of it is going to be make sure to remember that the custom ideas by the way guys it's very important so we're going to say save and close ticket and primary is going to be the primary and then set emoji it's going to be this save emoji i like it and then the second one is going to be lock the label if it's going to be locked and also secondary why not and then here we can say look or put the lock emoji and the last one unlock make sure let's have them in and lower case the letters is much easier this way and here we're gonna say unlock and the emoji is gonna be this emoji all right pretty simple so far so we're gonna type channel dot send er sorry interactions and loads and it's direction channel don't send and here we're going to send embeds we're going to send the first embed that we created and then components we're going to send the buttons all right so now that it's done um what we can do yeah what we can do is actually also type let's add content here for example content and stack the member and say here is your ticket all right let's put a comma in here and that's it you can customize this embeds as much as you guys would like it doesn't matter to me at all all right and then we're gonna interaction dot reply um contents see here but this is remember your ticket has been created and it's going to be the channel object [Music] i just realized something so keep this keep this guys alright so we're gonna copy all of this up here to the console embed all right copy this and we're gonna paste it here under the channel all right save it and remove the interaction with channel all right and this is it um that's all we have to do just move the code to be below this bracket around the brackets and backticks pretty simple so we can access the channel object uh all right so once that is done i realized here let's remove this for example all right let's move this in the embed and then we can send another message we're gonna send content and here in the content we're gonna say remember here is your ticket all right and then we're gonna set a timeout also if we would like to then we're gonna grab the message object and then we're gonna sorry we're gonna set timeout and we're gonna tap m dot delete then don't catch and we can avoid it basically and here we're going to set the timeout to be for example one times if five seconds for example and that will delete the message in five thousand and five seconds all right now we're gonna retraction reply and this should be guys this should be it for this file so let's restart our bots all right and now let's try it out let's press play report and it should open a ticket in the category and like you see here leaks your ticket has been created let's make this a thermal real quick um where is it dress reply let's make the thermal so we don't clog up the channel ticket all right now let's go to player and like you see here we got tagged and the message got removed because we didn't tear you up all right so please wait patiently for response from the staff team and the meanwhile describe your issue and here we have your buttons and now again if you press them nothing will happen because we need to set up another event listener all right so so far so good um let's go to our database for example leaks code let's refresh tickets like you see here we got our ticket information with the id all right so let's remove this all right let's remove this channel and let's remove this meshes let's restart the bolt and now let's stop player report and i can see the channel created and i got tagged bug reports other reports and like you see the channel names are gonna be changing pretty simple and also it's gonna be storing all of this data inside of the database all right so so far so good if you haven't uh because or this knot is working for you just roll back on the video and you should be good to go let's delete this channel and let's delete this for now you can keep them if you want but i rather not all right so so far so good what we're going to be doing now is going to set up the last event listener which is going to be listening on these buttons the close log and unlock all right so we're going to go back to our folder and we're going to create a new file and we're going to call it for example and take it or whatever tickets options options whatever you call it whatever i'm very bad at names same concept here you can open up a block require discord.js and then we're gonna grab the button interaction and the message embed hold button embed all right and then now we're going to download a package a very nice package we're going to call it the name of the package is discord uh i'm going to type it out for you so mpmi go to the manual type mpmi and this code that's html dash transcripts and if you're unsure i will leave it in the description to download it all right i already have it downloads but let's update it for whatever reason once that is done we're going to require it in here so we'll attach cons to open up an object required uh let's see what was it discord html scripts and we're gonna grab the create transcript property all right so now we're gonna type cons or open up a new object and require our transcripts channel id so dot slash total slash structures slash config.json and begin a grab that transcripts id that we also created in the beginning of the video uh also we're gonna be needing our database so dp equals to require a total slash structure slash schemas slash ticket all right so we can edit it and now here we're going to model dot export all right name of it's going to be interaction create the beginner async execute the normal stuff and then we're gonna grab our parameter so button interaction so far so good all right so it's gonna be the same concept so if this mesh mark interaction don't create or is button we're gonna return and we're gonna create an uh we're gonna grab a couple of objects from the interaction so for the same direction we're gonna grab the guild id guide guide object custom id and then channel channel so we know what what ticket channel this happened in and then we're going to create the array again so if estimation mark we're going to create an a an array close block and unlock and these names should be exactly the names that we specified in here right and then we're going to return of the orange all right so while editing the video guys i noticed we didn't do a permission shake here which we should so let's grab the member object from the interaction and then we're going to shake so we're gonna type if exclamation mark member dot permission installed has administrator uh we're gonna basically return with the interaction reply saying that you cannot use these buttons pretty simple and straightforward you can set this to be the permission that you would like to but make sure to put these lines of code so the ticket opener doesn't save and close and lock the ticket on its own there you guys and now you continue watching the template embed so cause embed view message embed and we're gonna set the color of it to be whatever it can be blue it can be yellow it can be whatever you want and now we can access the database so we're going to type dp dot find one we're going to find one with them uh what was the channel id i think yeah channel and just to be safe let's go to our structures scammers tickets channel id all right channel id should be the same as this introduction channel id and what we're gonna be doing we're gonna async error and that for dogs we can call it whatever you want dogs and what we're gonna be doing in here is we're gonna check if it errors out so if error we're gonna throw the error and if there is no data or docs we're gonna return interaction dot reply content note that i was found related to this ticket please delete manually forever forever let's be safe this won't happen if you're doing everything right but for whatever reason all right so if there is no data we can return this and if it is that are we going to be continuing so here we're going to we're going to create a switch statement so switch and here we're going to type custom id and switch statement it's like um it's like if statements but a little bit cleaner so switch and all right so case one so keys look what we're gonna do is um we're gonna check if docs dot load equals to true do we get a return interaction dot reply and we're gonna say content the ticket is already locked and it's gonna be a thermal so the admin doesn't get him embarrassed for whatever reason but if it's not then the code will continue and when it does continue we're gonna await dp dot update one i think update one here and we're going to filter so channel is going to cell id is going to be channel id descent as an interaction and we're going to edit so we get is going to be set to true now i'll begin a interaction sorry embed.set description we're gonna add an emoji and we're gonna say for example this ticket is now locked for reviewing whatever i know this is wrong but come at me right so what we're going to do now we're going to type channel dot permission overwrites and don't edit and we're going gonna type docs dots member id and we can open up an object and here we're gonna type send messages false all right it's pretty simple um now we're gonna return interaction go to reply and just type embeds and this provide dashboard and then here we can break if you want as a matter because it returned here anyway but let's break so case two case unlock all right we're gonna be see i always wonder what's locking this break oh because we returned so it's pretty simple all right so now case um guess law unlock we're gonna be doing the same so let's copy all of this right with the break paste it here all right if dogs is false so if it's not locked we're gonna say the ticket is already unlocked right if thermal true and we don't need to update or we need that so locked it's gonna be false in here because we need to update it and now here we can say we can edit the emoji and say this stickers ticket is now unlocked simple logic uh but and here we're gonna change this from false to true and that's basically it for a look and now for the final part which is um that close and is what we're gonna be doing now we're gonna check if docs dot closed is true then we're gonna return interaction dot reply with the content we're gonna say um ticket is already closed please wait for it to get deleted and it's going to be thermal true but if it's not the code will continue and here we're going to type phones attachments how do you type attachment guys attach that's all right away create transcript and here we're going to provide the channel object and here we here we have our settings to limit it's going to be -1 so we can get every single message that we can get and then return buffer is going to be false and the file name we're going to set the filename to be docs dot type so the type of the what's called the ticket plus we don't need to close it here um you type this and here we can tab docs dot ticket id and it should be dot html pretty simple because it's going to be html file which is pretty pretty cool right now we're gonna go down here and we're gonna wait dp dot update one and we're gonna update one with the channel id the same as this one and the update is gonna be closed set true and that's it now we're gonna go down a couple of more lines we're gonna type const member equals capitalize it member equals to guide dot members dot cash dot gets when i get the docs dots member id the actual uh member id of the one that open the ticket and what we're gonna be doing is that cons message equals a weight and here we're gonna get the transcript channel transcripts id was that one that's important yes it was and then we're gonna do send an object so embeds it's going to be embed.set author and we're going to set those to be member user.tag and remember dot user member dot user dot display avatar url then i'm accepted true and then we're gonna set the title so set actually it's gonna be here [Music] set title the title is gonna be let's save this it's gonna be better said that it's gonna be transcript and script type and here we're going to type dogs type and we're going to create a new line id is going to be docs dot ticket id pretty simple and then we're gonna go down and we're gonna type sorry ticket id we're gonna go down tab files files and here we're gonna paste the attachment and then we're gonna go down one more line here i'm gonna type interaction dot reply and embeds we're going to say embed what set description that so let's make practice that transcript is now saved and here we're going to create a hyperlink click our transcript and here we're going to provide the message dot url that we sent in here and then we're gonna set the timeout so we're gonna go down here we're gonna set timeout and channel dot delete all right and then we're gonna delete it after 10 seconds for example 10 times times 1000 and this is basically it guys so let's try out everything and it should be good to go all right so let's now press play report no data always is happening so let's check here oh i'm so sorry those includes custom id over here you guys let's save this all right remove this i'm a person to make mistakes too guys so all right so now we're gonna um click on the button again right your ticket has been created nowhere is in the console let's click on the tickets all right that message automatically get deleted now let's check the database like you see here closed uh or locked false why is the type not saving here did we forget the type this could be a problem where is it initial tickets no well it is the initial ticket oh it should be capital t in here guys so it's it's it's pretty case sensitive if you're working with javascript so let's delete this again all right let's go to the database remove this all right now again let's restart the boat now player report let's wait until the bot gets open all right now if you go to the database it should have the type player exactly close false now if we if you look at the channel now permissions you should see that i have the send messages even though i'm admin you know i'm just testing now if i lock it the channel is now locked for reviewing permissions now i should not have this information like you see here and the database should be changed from false to true in here right so unlock it and i should have my permission back and this should change let's go ahead and see yes sir and now let's type whatever let's type hello wilson wherever wherever and now here we're gonna save and close tickets and actually here that the transcript is now saved let's go to the trans transcript and now like we see here we have the file and we have the id of the ticket player and the channel got automatically deleted now if we press download all right press on this like you see here this is all the contents of the message so this could be saved in your in this transcript channels so that's that was all so what i'm gonna do now is i'm gonna go through every command that we created or every file scroll down all right this is for the command initial so you can pause if you have any problems let's go down here too and our schema like here and this is basically it so this is hard coded ids basically because it's a guideline ticket system if you really want to have the global ticket system with configuration commands and stuff like that leave a like on the on the video and comment what sort of futures you would like to be added to this system so thank you guys for watching and i hope to see you in the next episode

Channel: Lyxcode

Views: 715

Keywords: ticket system, ticket system discord, ticket system discord.js, channel transcript, HTML channel transcripts, discord.js ticket system, ticket system with buttons, buttons, discord.js buttons, ticket system discord.js v13, discord.js v13, discord, discord bot, how to create a discord bot, how to create bot ticket system

Id: iG2OY4HZrNg

Length: 44min 25sec (2665 seconds)

Published: Sun Dec 19 2021