# Customer support block

Use the **Customer support** block on your product page to let customers know about your support policy and how they can contact you.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FdlhFMe66Gzj2KjBhW7um%2Fcustomer-support.png?alt=media&#x26;token=9c60f61c-0de6-4399-97da-915f6b30e62f" alt="" width="563"><figcaption></figcaption></figure>

## Set up block

***

In the editor side panel, click **(+) Add section** and select **Customer support**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click on the **Customer support** block to find the following settings.

<table><thead><tr><th width="181">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Column</mark></td><td>Display the block in either the <strong>Right column</strong> (in the product form) or the <strong>Left column</strong> (beneath the product media).</td></tr><tr><td><mark style="color:blue;">Add box</mark></td><td>Display the block within a box with a background color.</td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Display the headings and buttons as <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> aligned.</td></tr></tbody></table>

#### Content

<table><thead><tr><th width="186">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading for the block.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to inform customers about your support policy and contact details.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an optional image next to the text content.</td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Set the pixel width of images for desktop screens: between 20 and 120 pixels.</td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Set the pixel width of images for mobile screens: between 20 and 100 pixels.</td></tr><tr><td><mark style="color:blue;">Apply circle crop to images</mark></td><td>Choose to crop the image to appear as a circle.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the image Left of content or Right of content.</td></tr></tbody></table>

#### Buttons

<table><thead><tr><th width="161">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Label</mark></td><td>Enter call-to-action text for the button label.</td></tr><tr><td><mark style="color:blue;">Link</mark></td><td>Select or paste a URL to a contact page. <br><br>You can add a “mailto” link that will open up a draft message in their default email client. For example: mailto:joe@email.com</td></tr><tr><td><mark style="color:blue;">Style</mark></td><td>Change the style of the button. Select <strong>Primary button (Solid)</strong>, <strong>Secondary button (Solid)</strong>, or T<strong>ertiary button (Outline)</strong>.</td></tr></tbody></table>

#### Collapsible row

<table><thead><tr><th width="172">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Display as collapsible row</mark></td><td>Show an expandable title that reveals the text when clicked.</td></tr><tr><td><mark style="color:blue;">Expand by default</mark></td><td>Display the collapsible row as open with the text already revealed.</td></tr><tr><td><mark style="color:blue;">Collapsible row title</mark></td><td>Enter text for the row title.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/cornerstone/product-pages/product-template)\
> [Product overview blocks](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/customer-support-block.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.