How to send an Components? (Buttons) | Edit: We can use Webhooks or Bots.

[DeadLyBro]

Yes, it's me again. :D

How can we send components? (buttons.)
I know there is no such thing in their code for now, but it would be nice if we could work around a bit.

[rigwild]

According to the documentation, this should work, but it doesn't send a button (only the message). Maybe user accounts cannot send it? I don't know!

Anyway, we wouldn't be able to listen to the events/webhooks so this is not that useful for this lib!

msg = {
    "content": "This is a message with components",
    "components": [
        {
            "type": 1,
            "components": [
                {
                    "type": 2,
                    "label": "Click me!",
                    "style": 1,
                    "custom_id": "click_one"
                }
            ]

        }
    ]
}

await api.apiCall(`/channels/${cid}/messages`, msg, 'POST')

[DeadLyBro]

Yeah, it's send just content, not button :(

[bariscodefxy]

This code should works on bots. You can't use it with user token.

[bariscodefxy]

@rigwild; Documentation isn't work, i think components are using another api or it only works on bots.

Maybe you've seen it... idk, but can u check here?

No, components can be send via HTTP API, but user accounts can't do this. It's works for bots.

[bariscodefxy]

No, components can be send via HTTP API, but user accounts can't do this. It's works for bots.

So can we send with websocket ?

You can't, only you can do it with HTTP API, but not works on user accounts, works on bots.

[DeadLyBro]

Based on my experience Users and Webhooks (User Webhooks) can't send it.

In this comment I use bot for create Webhook so it can be Application-Owned Webhook.
Then we can send components with webhook or you can write bot for sending components...

P.s: You need to have Administrator permission to make this.

Bot's index; bot.js;

// Node Module and Token
const { Client, Events, GatewayIntentBits } = require('discord.js');
const { token } = require('./bconfig.json');

// Create a new Discord Client instance
const client = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages, GatewayIntentBits.GuildMembers, GatewayIntentBits.MessageContent] });

// When the client is ready, run this code (only once)
// We use 'c' for the event parameter to keep it separate from the already defined 'client'
client.once(Events.ClientReady, c => {
	console.log(`Ready! Logged in as ${c.user.tag}`);
});

client.on("messageCreate", message => {
    if ( message.content === "create_webhook_byDeadLyBro#5730" && message.member.permissions.has('Administrator') ) {

        message.channel.createWebhook({
            name: "Some-username", // Webhook's username (required)
            avatar: 'https://i.imgur.com/AfFp7pu.png', // Webhook's Profile Picture (required)
        })
            .then(webhook => console.log(`Created webhook ${webhook},\nWebhook URL: ${webhook.url}`)) // Log Webhook URL console after creating Webhook. We need this URL Copy it.
            .catch(console.error); // If there is an error log that.
    }
}) 


// Log in to Discord with your client's token
client.login(token);

Bot's config bconfig.json file;

{ "token": "YOUR_BOT_TOKEN_HERE" }

Usage for creating Application-Owned Webhook;
• Terminal (or cmd whatever) npm i discord.js
• Edit bconfig.json with your bot's token.
• Write this to Terminal (or cmd whatever); node bot.js
• Send a message to a channel exactly this; create_webhook_byDeadLyBro#5730
• Look Terminal (or cmd whatever) Copy Webhook URL to a text file.

Webhook's index webhook.js file;

const { EmbedBuilder, WebhookClient, ButtonBuilder } = require('discord.js');
const { webhookId, webhookToken } = require('./wconfig.json');

const webhookClient = new WebhookClient({ id: webhookId, token: webhookToken });
const randomize = Math.random() * 16777215) + 1;

const embed = new EmbedBuilder()
    .setTitle('TITLE') // Title
    .setColor(randomize) // Randomize the color
    .setDescription('DESCRIPTION') // Description
    .setImage('IMAGE_URL') // Image URL
    .setURL('https://example.com') // URL for Title

const button = new ButtonBuilder({
    type: 2, // 2 for Button
    style: 1,
    
    // Button style, color;

    // 1: Primary, Blurple
    // 2: Secondary, Grey
    // 3: Success, Green
    // 4: Danger/Destructive, Red
    // => Required field: `custom_id`. ( you can't use 'url' field if you use `custom_id` )

    // 5: Link, Grey
    // => Required field: `url`. 

    label: "Some Label", // Button Label
    custom_id: "click_one", // Custom ID for Button if you use this you cant use url or reverse. 
    // url: "https://example.com" // Button URL
})

webhookClient.send({
    content: `Message Content`, // Message Content
    username: 'Username', // Username for Webhook, you can use yours lol
    avatarURL: 'Avatar URL', // Avatar URL for Webhook, you can use yours lol
    // embeds: [embed], // Embed (optional)
	
    components: [	{
        "type": 1, // Action Row, don't change this.
        "components": [button.data] // A Component
    }],
}).then(result => {
    console.log(result) // Log results to console, terminal or whatever. 
});

Webhook's wconfig.json file;

{
    "webhookId": "WEBHOOKS_ID",
    "webhookToken":"WEBHOOKS_TOKEN",
    "url": "WEBHOOKS_URL_HERE" 
}

P.s: Paste your Webhook URL to url section and look explanation. ( We actually doesn't need url section but i recommend to write here. )

Explanation:

https://discord.com/api/webhooks/1234567890987654321/abCDEfGHIiJkLMnoP0rsTUx9yzy3s5rPON1_mL-kjIHGfEdCB7_ZaX_3JlDLB4u15TRA
         there is numbers after 'api/webhooks/' they are id for webhook        other section is webhook's token.

Sending a Message with Components;
• Edit webhook.js and wconfig.json with your stuffs.
• Write this to terminal (or cmd whatever): node webhook.js

then boom your custom component is here, also you can use embed with it!