1. Home
  2. /
  3. Docs
  4. /
  5. Better Chat Support Pro
  6. /
  7. Button Integration
  8. /
  9. 2. Gutenberg Block Button

2. Gutenberg Block Button

Gutenberg Button

Gutenberg Block – Button

Use the Better Chat Support Button block to place a Messenger chat button anywhere inside your page or post using the Gutenberg editor.

  1. Button Type – Choose the button layout.
    • Example: Basic Button
      (Different styles may provide different layouts and features)

General Settings

  1. Messenger User Name – Enter your Facebook username or page ID.
    • Example: facebook.com/themeatelier → enter themeatelier
    • Do not paste the full URL
  1. Button Text – Set the text displayed on the button.
    Example: How can I help you?
  1. Open Link in New Window – Enable this option to open Messenger in a new tab instead of the same window.

Button Style

  1. Visibility On – Control where the button appears.
    • Everywhere
    • Desktop only
    • Tablet only
    • Mobile only
  1. Button Size – Select the size of the button.
    Example: Small, Medium, Large
  1. Border Style – Choose the shape/style of the button.
    Example: Rounded
  1. Background – Enable or disable button background color.

Icon

  1. Icon Settings – Customize the button icon (if enabled).
    • Choose icon type
    • Adjust icon visibility and styling

Pro Tip

Use the Gutenberg block when you want full control over placement inside content, such as landing pages, blog posts, or call-to-action sections.

How can we help?

Darkify Dark Mode