# Getting started

### Before getting started...

We suggest you be familiar with `discord.py` and `python`. This is a `discord-components` guide so it couldn't contain a lot of python explanations.

### Install

First, we need to install the library

```bash
pip install --upgrade discord-components
```

{% hint style="danger" %}
If you meet an error `No matching distribution found for discord-components` when installing, try updating the python version! (It must be upper than `3.6`)
{% endhint %}

### Send buttons

Assuming you have invited your bot to some server, let's code.  Create any python file and copy & paste the code below. (with replacing `your token` with your bot's token and `your prefix` with your bot's prefix) 

{% code title="bot.py" %}

```python
from discord_components import DiscordComponents, ComponentsBot, Button

bot = ComponentsBot(command_prefix = "your prefix")
"""
or you can just override the methods yourself

bot = discord.ext.commands.Bot("!")
DiscordComponents(bot)
"""


@bot.event
async def on_ready():
    print(f"Logged in as {bot.user}!")


@bot.command()
async def button(ctx):
    await ctx.send(
        "Hello, World!",
        components = [
            Button(label = "WOW button!", custom_id = "button1")
        ],
    )


bot.run("your token")
```

{% endcode %}

![Yay! A gray button](https://2862323330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MasPnYu-POsvMsmVwab%2F-MasjY2NO_Nb-4td23Ds%2F-MasjjoAxAptw0eD9eqS%2Fimage.png?alt=media\&token=c8ca959a-b256-4f62-82fd-6967abe98d2e)

You created a button! well done. Let's add a little clarification to the code. 

`ComponentsBot(...)` initializes the client. It changes the bot's methods. So you could create components by  just`await ctx.send(..., components = [...])`.

`Button(label = "WOW button!", custom_id = "button1")` this piece of code creates a button with the label "WOW button!" and sets the custom\_id to "button1". 

{% code title="bot.py" %}

```python
await ctx.send(
    "Hello, World!",
    components = [
        Button(label = "WOW button!", custom_id = "button1")
    ]
)
```

{% endcode %}

This code makes the bot send a message containing the button.

### Responding to the interaction

  But when you click that button, you will meet the error `This interaction failed`. That's because you haven't responded to the `interaction (button click)`.  Let's edit the code.

{% code title="bot.py" %}

```python
from discord_components import DiscordComponents, ComponentsBot, Button

bot = ComponentsBot(command_prefix = "your prefix")
"""
or you can just override the methods yourself

bot = discord.ext.commands.Bot("!")
DiscordComponents(bot)
"""


@bot.event
async def on_ready():
    print(f"Logged in as {bot.user}!")


@bot.command()
async def button(ctx):
    await ctx.send(
        "Hello, World!",
        components = [
            Button(label = "WOW button!", custom_id = "button1")
        ]
    )

    interaction = await bot.wait_for("button_click", check = lambda i: i.custom_id == "button1")
    await interaction.send(content = "Button clicked!")


bot.run("your token")
```

{% endcode %}

![Button clicked!](https://2862323330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MasPnYu-POsvMsmVwab%2F-MasjY2NO_Nb-4td23Ds%2F-MaspKYrVP5LUQ6HD6Rm%2Fimage.png?alt=media\&token=c53df5cb-f8ba-4cb0-a895-d4c6103ce429)

We just added two lines and poof! An ephemeral message (a message which only can be seen by you). 

```python
await bot.wait_for("button_click", check = lambda i: i.custom_id == "button1")
```

This method is the same as [`<discord.ext.commands.Bot>.wait_for`](https://discordpy.readthedocs.io/en/stable/ext/commands/api.html?highlight=wait_for#discord.ext.commands.Bot.wait_for). Except for the fact it returns [`Interaction`](https://devkiki7000.gitbook.io/discord-components/api-reference/interaction). This code waits until a user clicks the button with "button1" as a custom id. WOW!

{% code title="bot.py" %}

```python
await interaction.send(content = "Button clicked!")
```

{% endcode %}

This response to the interaction. It sends an ephemeral message with the content "Button clicked!". You could just send a normal message by setting the ephemeral parameter `False`.

### Send selects

Let's import some things and add a command!

{% code title="bot.py" %}

```python
from discord_components import DiscordComponents, ComponentsBot, Button, Select, SelectOption

bot = ComponentsBot(command_prefix = "your prefix")
"""
or you can just override the methods yourself

bot = discord.ext.commands.Bot("!")
DiscordComponents(bot)
"""


@bot.event
async def on_ready():
    print(f"Logged in as {bot.user}!")


@bot.command()
async def button(ctx):
    await ctx.send(
        "Hello, World!",
        components = [
            Button(label = "WOW button!")
        ]
    )

    interaction = await bot.wait_for("button_click", check = lambda i: i.component.label.startswith("WOW"))
    await interaction.send(content = "Button clicked!")


@bot.command()
async def select(ctx):
    await ctx.send(
        "Hello, World!",
        components = [
            Select(
                placeholder = "Select something!",
                options = [
                    SelectOption(label = "A", value = "A"),
                    SelectOption(label = "B", value = "B")
                ]
            )
        ]
    )

    interaction = await bot.wait_for("select_option")
    await interaction.send(content = f"{interaction.values[0]} selected!")


bot.run("your token")
```

{% endcode %}

If you run this and type `!select`, you'll see a message with select! And if you select something, the bot will send an ephemeral message!

![Select!](https://2862323330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MasPnYu-POsvMsmVwab%2F-MdkdJx-n0ZJzqjsApye%2F-MdkwTQBrMD_4Jzp6lbx%2Fimage.png?alt=media\&token=69b26826-09d2-4edc-a9a6-0c237ffd3e39)

The code is easy to understand. You send a select with two options - one with label A and value a (the value that is passed when selected, it is like custom id on buttons) and one with label B and value b. And the select's place holder is set to `Select something!`.

And you wait for the user to select an option. the `wait_for` returns an [`Interaction`](https://devkiki7000.gitbook.io/discord-components/api-reference/interaction) object. But the `component` property is the list of options the user selected (If you didn't set the `max_values` parameter when creating a select object, it contains 1 option).

You send an ephemeral message to the user telling the option the user selected.

### Now code!

You learned how to create a button and responding to an interaction..! Have an error or a question? Look at the [Frequently Asked questions](https://devkiki7000.gitbook.io/discord-components/guide/frequently-asked-questions) or go to the [discord server](https://discord.gg/pKM6stqPxS) and ask a question!