---
schema_version: "1"
id: 9ed1764ca061b1ccbd4950675085e06d732ce6847a4118324e7070ed3fc4b19d
title: Create Widgets
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_widget_create.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_widget_create.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 2899eac832953cf42bd530c5a11de730d8257e0c1bb4cca8ad60c9a92f60687d
description: Widgets let you create custom, reusable page elements by combining existing Site.com page elements, custom code, and CSS.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Create Widgets

Widgets let you create custom, reusable page elements by combining existing Site.com page elements, custom code, and CSS.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
        <colgroup>
          <col>
        </colgroup>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>,
                and <strong>Unlimited</strong> Editions</p>
              <p style="margin-bottom:0;">Available (with limitations) in:
                <strong>Developer</strong> Edition
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d60976e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d60976e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d60976e74 ">
              <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
                user detail page</p>
              <p>AND</p>
              <p style="margin-bottom:0;">Site administrator or designer role
                assigned at the site level</p>
            </td>

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

When you create a widget, it's added to the Widgets view on the Overview tab, where you can access and manage all of the site's widgets. If you make it available, the widget also appears in the Widgets section of the Page Elements tab, where you and your team can easily drag it onto the page. You can also let contributors add widgets to site pages.

1. Hover over **Widgets** on the Overview tab and click **New**, or click **New Widget** when the Widgets view is open.
2. Enter the widget name. This name appears in the Page Elements pane.
3. Optionally, add a description.
    
    The description appears as a tooltip in the Page Elements pane.
4. To add a display icon for the widget, select an image from your imported assets. Use an icon that's 16 x 16 pixels in size.
5. Optionally, deselect Available in the Page Elements Pane if you don't want the widget to appear in the Page Elements pane.
    
    For example, you don’t want the widget to appear until you've finished building it.
6. Click **Apply**. Now you're ready to add page elements to the widget.
7. Click the widget's name to open it in a new tab.
8. Add the page elements and CSS styles you need.
9. Optionally, add custom properties or branding properties to the widget.

After you finish building the widget, ensure it's available in the Page Elements tab by selecting Available in Page Elements Pane on the Properties pane.

To let contributor's add a widget to a site page, select Available to Contributors on the Properties pane. This setting controls whether the widget appears in the contributor's Page Elements pane. You must also ensure that the site includes a template-based site page with at least one editable panel.

#### See Also

- [Widgets Overview](https://help.salesforce.com/s/articleView?id=platform.siteforce_widget_overview.htm&release=264.0.0&type=5 "Widgets let you save time by building custom page elements that you and your team can reuse throughout the site.")
- [Custom Properties for Page Templates or Widgets Overview](https://help.salesforce.com/s/articleView?id=platform.siteforce_widget_properties_about.htm&release=264.0.0&type=5 "When you create a page template or a widget, you can add custom properties to it and specify the value and type of each property to achieve greater flexibility over how templates and widgets are reused.")
- [Site Branding Overview](https://help.salesforce.com/s/articleView?id=platform.siteforce_prop_brand_overview.htm&release=264.0.0&type=5 "Branding provides a flexible way for you to define different aspects of your website's brand. Once branding properties are defined, your editors can easily customize everything in one centralized place, the Branding Editor. When your website editors customize the properties, they get a preview of their branding changes immediately.")
- [Add a Widget to a Page](https://help.salesforce.com/s/articleView?id=platform.siteforce_widget_addtopage.htm&release=264.0.0&type=5 "Add a widget that enhances your page.")