---
schema_version: "1"
id: 6ec901a7c1e602b30f44386307007c7247a5a1ba147f13c52dd89ec1205fd564
title: Contact Support Button
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_contact_support_button.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_contact_support_button.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: ad7eb2b4475b306ac1a08f639d72ae068c48aed0c364ec895ffa30ecc4d9b093
description: The Contact Support Button component adds a button that users click to create a case. When you enable Web-to-Case and set up a guest user case publishing action, guest users aren’t required to log in before creating a case.
products:
  - Experiences
release: "264"
---
# Contact Support Button

The Contact Support Button component adds a button that users click to create a case. When you enable Web-to-Case and set up a guest user case publishing action, guest users aren’t required to log in before creating a case.

Each button instance supports its own property values. So, if you have two Contact Support buttons on a page, the values on each button are unique to that button. You can configure buttons to use the values you defined in your theme so that they all look the same. But each button instance remains unique.

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

Note Guest users can’t attach files when creating a case.

1. Select the **Contact Support Button** component in the page you're configuring.
2. In the property editor, configure the properties for the component:
    
    <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="d50091e64">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d50091e67">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e64 ">
                  <samp class="parmname">Button Label</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e67 ">The text to show on the button that users click to create
                  a case. The default text is <samp class="parmname">Contact
                    Support</samp>.</td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e67 ">
                  <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="d50091e64 ">
                  <samp class="parmname">Button Text Hover Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e67 ">
                  <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="d50091e64 ">
                  <samp class="parmname">Button Background Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e67 ">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="d50091e64 ">
                  <samp class="parmname">Button Background Hover
                    Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e67 ">
                  <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="d50091e64 ">
                  <samp class="parmname">Button Border Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e67 ">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="d50091e64 ">
                  <samp class="parmname">Button Border Radius</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e67 ">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="d50091e64 ">
                  <samp class="parmname">Max Button Width</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e67 ">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="d50091e64 ">
                  <samp class="parmname">Button Alignment</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d50091e67 ">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 Support Button component:

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