Discord Components v2 usage with Custom Commands bot
This blog contains documentation about how to use all the possible components available in discord components v2
Md Shahriyar Alam
a year ago
Introduction
Discord has revolutionized the way communities interact, and bots play a pivotal role in automating tasks and enhancing user engagement. With the advent of Discord Components v2, developers are now equipped with a more flexible and powerful toolkit to create interactive and dynamic user interfaces within Discord messages. So lets see what are the available components and how we can use them
Text Display Component
This component lets us display text. It can be normal text or headings.
t1 = TextDisplay(content="A cool text to display")
t2 = TextDisplay(content="# This is a heading")Media gallery Component
Media gallery component allows us to display multiple images in a gallery type look
gallery = MediaGallery()
gallery.add_media_gallery_item("image_url_here", description="This is image 1")
gallery.add_media_gallery_item("image_url_here", description="This is image 2")Section Component
Section component has 2 part, the section content, where you can add texts and accessory part where you can add thumbnail or buttons
# section with button
btn = Button("Click Me", custom_id="btn1")
s1 = Section(accessory=btn)
s1.add_text_display("This is a cool section with a button")
# section with link button
btn = LinkButton("Blog", url="https://ccbot.app/blog")
s2 = Section(accessory=btn)
s2.add_text_display("Read our blog here")
# section with thumbnail
thumb = Thumbnail(media="image_url_here"))
s3 = Section(accessory=thumb)
s3.add_text_display("This is a cool section with a thumbnail")Separator Component
Separator component lets us separate 2 components with a devider line. We can also control how much spacing it will have
large = Separator(spacing=Spacing.LARGE)
small = Separator(spacing=Spacing.SMALL)
no_divider = Separator(divider=False)File Component
If you want to add files in a message
img = load_file("file_url", filename="filename.jpg")
img_file = File(file=img)Container Component
Container component looks like an embed but it can have all the above components added to it
container = Container(accent_color=Color.from_hex_code("FFFFFF"))
t1 = TextDisplay(content="A cool text to display")
t2 = TextDisplay(content="# This is a heading")
large_sp = Separator(spacing=Spacing.LARGE)
container.add_component(t1)
container.add_component(large_sp)
container.add_component(t2)Example
Here is an example of making a profile like view using components v2
# Creating the container
container = Container(accent_color=Color.from_hex_code("#2F3136"))
# The image gallery
gallery = MediaGallery()
gallery.add_media_gallery_item("https://picsum.photos/id/15/367/267", description="This is image 1")
gallery.add_media_gallery_item("https://picsum.photos/id/16/367/267", description="This is image 2")
gallery.add_media_gallery_item("https://picsum.photos/id/17/367/267", description="This is image 3")
# A separator that separates things but has no visiable border
hidden_sp = Separator(spacing=Spacing.SMALL, divider=False)
# Bio Section with some Text and a thumbnail
thumbnail = Thumbnail(media="https://shahriyar.dev/images/me.jpg")
bio_section = Section(accessory=thumbnail)
bio_section.add_text_display("# Md Shahriyar Alam")
bio_section.add_text_display("Full-Stack Web Developer with knowledge of ReactJs NextJs, Redux, Typescript, ExpressJs, Node, MongoDB. Also has experience with developing backend APIs using Python web frameworks.")
# Large Spacing separator
sp = Separator(spacing=Spacing.LARGE)
# Contact button for container footer
contact_button = LinkButton("Contact Me", url="https://shahriyar.dev")
contact_section = Section(accessory=contact_button)
contact_section.add_text_display("> If you have any query feel free to contact me")
# Adding all the components into the contianer
container.add_component(gallery)
container.add_component(hidden_sp)
container.add_component(bio_section)
container.add_component(sp)
container.add_component(contact_section)
set_components([container])And here is how it looks
If you dont want any container you can just do
set_components([gallery, hidden_sp, bio_section, sp, contact_section])You can also use a component builder with it
builder = ComponentBuilder()
builder.add_button(...)
builder.add_button(...)
# Now you can either add it to the container like
container.add_component(builder.action_row)
# Or directly set it to components
set_components([gallery, hidden_sp, bio_section, sp, contact_section, builder])Loading comments…
Need help?
Have a question, a suggestion, or stuck on something? Reach out — we're happy to help.