---
schema_version: "1"
id: 6ce4379f943a218c49afc14524beddefddc57d4633ae9caea5b44a5c8f24af53
title: Add Custom Code to Pages
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_code_custom.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_code_custom.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 8e373122a94f91df5e7c866c6b8c13d0e4b649cd59d3dfa1f8ca68ee593a0c12
description: Custom code lets you customize your site using markup, such as HTML and JavaScript.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Add Custom Code to Pages

Custom code lets you customize your site using markup, such as HTML and JavaScript.

### 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="d212449e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d212449e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d212449e74 ">
              <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>

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

Tip

- Scripts can't execute while you're editing a page in Site.com Studio. To test your code, preview the page.
- If you are building a Site.com site from an existing HTML site, avoid using the Custom Code page element to paste large chunks of HTML from the original site. Instead, use the available page elements, such as panels, content blocks, and data tables. Using these elements lets you make future updates and design changes much more easily.

- Add markup to a specific location on a page using the Custom Code page element. JavaScript added using the Custom Code page element loads when that part of the page loads.
- Add markup to the page `head`. JavaScript in the page `head` loads first.
- Add JavaScript to the page `body`. JavaScript added to the page `body` is positioned at the end of the `body` tag and only loads when the DOM is ready.
- Add a reference to a JavaScript file or library in the page `head` or `body`.

Add Markup Directly to the Page

1. Drag a **Custom Code** page element from the Page Element pane onto the page.
2. Enter the code in the Edit Code dialog box.
3. Click **Save and Close** to add the code directly to the page.

Add Markup to the Page `Head`

1. In the Scripts section of the Properties pane, click **Configure** in the Edit Head Markup section.
2. Enter the markup in the Edit HTML Code dialog box.
3. Click **Save and Close** to insert the markup into the page `head`.

Add JavaScript to the Page `Body`

1. In the Scripts section of the Properties pane, click **Configure** in the Edit Body Scripts section.
2. Enter the code in the Edit JavaScript Code dialog box. Don't add `<script>` tags, as they're already included.
3. Click **Save and Close** to add the code to the bottom of the page `body`.

Using JavaScript Files or Libraries

Instead of adding JavaScript code directly to a page, you can include links to imported or external JavaScript files, or to an open-source library (via the Google Libraries API).

1. In the Scripts section of the Properties pane, click ![Add](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_icon_add.png) in either the Body Scripts or the Head Scripts section.
2. To link to:
    - A JavaScript file that you've imported, select **An imported script** and select the file.
    - An open-source JavaScript library, select **A Google AJAX library** and select the library.
    - An external JavaScript file, select **A URL to an external script** and enter the address.
3. Click **Apply**.

#### See Also

- [Displaying Data or Content Using Custom Code](https://help.salesforce.com/s/articleView?id=platform.siteforce_data_code.htm&release=264.0.0&type=5 "In addition to data elements and content blocks, you can also use custom code as an alternative way to display data in a data repeater or in a page data connection. It's particularly useful for displaying field data that's inline with text.")
- [Add Site.com Page Elements](https://help.salesforce.com/s/articleView?id=platform.siteforce_objects_add.htm&release=264.0.0&type=5 "Page elements are the building blocks of your site pages and page templates. Panel elements add structure to your pages. You can think of both pages and panels as “containers” for the page elements that you add to them.")