---
schema_version: "1"
id: 077a17459db241ef657f0fa8a32a12107ba597a523b8b4d76d982d8f9c8a461d
title: Widgets Overview
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_widget_overview.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_widget_overview.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: da86730ca4266b64a91f6414d714c5e6b0216a2d19b3b16c7d0b3cf5a94395ba
description: Widgets let you save time by building custom page elements that you and your team can reuse throughout the site.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Widgets Overview

Widgets let you save time by building custom page elements that you and your team can reuse throughout the site.

### 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>

Using the existing Site.com page elements, such as panels, content blocks, custom code, or data repeaters, you can create widgets to suit your unique requirements. You can add custom properties to allow greater flexibility over how your widgets are reused. And you can even add a widget to another widget!

By using CSS to style the widget, you can ensure it always appears correctly whenever it's added to site pages or page templates. Additionally, you can let contributors add widgets to site pages and add branding properties that enable contributors to update the widget's appearance.

With widgets, you can:

- Minimize duplication in your site. You build one time, then reuse.
- Reduce maintenance overheads for you and your team. Any updates you make to a widget are automatically reflected in copies of the widget on the page.
- Improve the load time of your pages.

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_example.png)

Example

For example, you could use the custom code page element to create reusable social plug-in widgets, such as **Like** or **Follow** buttons from Facebook, or a Twitter feed. ![Facebook Like Button](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_widget.png)

Alternatively, to ensure a consistent look and feel across all of your pages, you could create a corporate header such as this sample header widget. It consists of a panel (1) that contains a company logo (2) and a menu (3). The widget also contains another widget (4) that's composed of a panel containing custom code for Facebook, Twitter, and RSS plug-ins.

![Sample widget numbered 1 - 4.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_widget_example_num.png)

You could also use widgets to store commonly used pieces of text, such as company names, addresses, legal text, and so on. Simply create a widget that contains a content block with the relevant text.

## Best Practices for Using Widgets

- Wherever possible, use widgets to reduce duplication in your site design. Reducing duplication is particularly important when working with complex designs or site elements, where maintenance can be time consuming.
- If you plan to use the same widgets across several sites, consider creating a basic site to contain all the required widgets. Then, for each new site, create a copy of that basic site. That way, each new site automatically includes all of the widgets you created.
- When using CSS to style widgets, add the CSS to the Site Style Sheet, which is the site's global style sheet. Because every page automatically references the style sheet, you can ensure that each widget appears correctly on the page.

- **[Create Widgets](https://help.salesforce.com/s/articleView?id=platform.siteforce_widget_create.htm&release=264.0.0&type=5)**  
    Widgets let you create custom, reusable page elements by combining existing Site.com page elements, custom code, and CSS.
- **[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.
- **[Edit and Delete Widgets](https://help.salesforce.com/s/articleView?id=platform.siteforce_widget_manage.htm&release=264.0.0&type=5)**  
    Access the site's widgets in the Widgets view under All Site Content (on the Overview tab).

#### See Also

- [Create Widgets](https://help.salesforce.com/s/articleView?id=platform.siteforce_widget_create.htm&release=264.0.0&type=5 "Widgets let you create custom, reusable page elements by combining existing Site.com page elements, custom code, and CSS.")
- [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.")