> ## Documentation Index
> Fetch the complete documentation index at: https://docs.echowp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Gutenberg Block

> How to Use the EchoAI Gutenberg Block

The EchoAI Gutenberg Block makes it easy to integrate the AI assistant into any page or post on your WordPress site. With just a few clicks, you can add the assistant and customize its appearance and placement.

<Frame caption="Gutenberg Editor">
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/veco/images/gutenberg-edit.png" alt="Gutenberg Editor" width="500" />
</Frame>

## How to Use the Gutenberg Block?

<Steps>
  <Step title="Edit Page or Post">
    Open the Gutenberg editor for the page or post where you want to add the assistant.
  </Step>

  <Step title="Add the EchoAI Assistant Block">
    * Click the **Add Block (+)** button at the top left or within the content area where you want the assistant to appear.
    * In the search bar, type **“EchoAI Chat”** and select the block from the results.

    <img src="https://mintlify.s3-us-west-1.amazonaws.com/veco/images/gutenberg-search.png" width="200" />
  </Step>

  <Step title="Customize the Block">
    * Once added, you can customize the block’s placement by dragging it to the desired position.
    * Adjust the block's height in the sidebar as needed. The default height is 400px.
    * The block will automatically adjust its width to fit the available space.
  </Step>
</Steps>

<CardGroup>
  <Card title="Settings" icon="sliders" href="/manual/settings">
    Customize the assistant

    >
  </Card>

  <Card title="Floating Button" icon="message-smile" href="/manual/floating-button">
    Read how floating button works.
  </Card>

  <Card title="Shortcode" icon="code" href="/manual/shortcode">
    Read how to use the `[echo_ai]` shortcode.
  </Card>
</CardGroup>