---
schema_version: "1"
id: 020958a09d250213f4f336b583935118eb6b30795b60e5308017fac568e4c659
title: Contact Request Button & Flow
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_contact_request_button_and_flow.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_contact_request_button_and_flow.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 388b78ef44d7880e30d5c38b9c06e02d32f4f0d5c5a7198d7e7d4c752e577927
description: Add the Contact Request Button & Flow component to let members click a button to request that customer support get back to them. Members describe the problem and enter their contact details in a window. After the request is sent, a support person can review the issue and contact the customer for follow-up and resolution.
products:
  - Experiences
release: "264"
---
# Contact Request Button & Flow

Add the Contact Request Button & Flow component to let members click a button to request that customer support get back to them. Members describe the problem and enter their contact details in a window. After the request is sent, a support person can review the issue and contact the customer for follow-up and resolution.

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_tip.png)

Tip To use this component, create a contact request flow from the Customer Contact Requests page in Setup. When a customer submits a request, a contact request record is created. You can route contact request records using Omni-Channel.

Contact Request works in public sites and sites that require authentication. Make sure that your site users have the Run Flows permission, including your Guest User profile that’s used in public sites. Without this permission, members don’t see the button to submit contact requests.

1. On the page that you’re configuring, select the **Contact Request Button & Flow** component.
2. In the property editor, configure the component properties.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:28.000000000000004%">
              <col style="width:72%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75790e61">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75790e64">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Button Label</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">The text to display on the support request button. The
                  default is Request Help. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Contact Request Flow</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">Select a contact request flow that you created in Setup
                  or in Flow Builder. Only active flows that have the type
                  Contact Request Flow are supported.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Button Text Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">
                  <p>Set the color of text to use for the button label.</p>
                  <p style="margin-bottom:0;">The
                    <span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/linked_to_theme.png" alt="Linked to Theme icon"></span> link icon shows that
                    the current selection comes from colors defined in the
                    theme.
                  </p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Button Text Hover Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">
                  <p>Set the color of text to use for the button label when a
                    member mouses over the button.</p>
                  <p style="margin-bottom:0;">In Experience Builder, you
                    can test hover colors in Preview mode.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Button Background Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">Set the color to use for the button background when the
                  button is inactive.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Button Background Hover
                    Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">
                  <p>Set the color to use for the button background when a
                    member mouses over the button.</p>
                  <p style="margin-bottom:0;">In Experience Builder, you
                    can test hover colors in Preview mode.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Button Border Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">Set the color to use for the border that surrounds the
                  button.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Button Border Radius</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">Move the slider to control the amount of curve to use for
                  the button shape.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Max Button Width</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">Move the slider to control the width of the button. Width
                  percentage is set against the full width of the container
                  that the button sits in. So 100% is the full width of the
                  container, rather than the full width of the browser
                  page.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e61 ">
                  <samp class="parmname">Button Alignment</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d75790e64 ">Select <kbd>Center</kbd>,
                  <kbd>Left</kbd>, or
                  <kbd>Right</kbd> to set the position of a
                  button within its container.
                </td>

              </tr>
            </tbody>
          </table>

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_example.png)

Example

Sample Contact Request Button & Flow component.

![Request Help button](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/contact_request_button_and_flow.png)

When a user clicks the button a window appears.

![Contact request popup window](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/contact_request_button_and_flow_popup.png)

#### See Also

- [Let Customers Create Contact Requests](https://help.salesforce.com/s/articleView?id=service.contact_request.htm&type=5&language=en_US)