Salesforce Docs Portal

Add Custom Code to Pages

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

Required Editions

Available in: Salesforce Classic

Available for purchase in: Enterprise, Performance, and Unlimited Editions

Available (with limitations) in: Developer Edition

User Permissions Needed
To build, edit, and manage Site.com sites:

Site.com Publisher User field enabled on the user detail page

AND

Site administrator or designer role assigned at the site level
Tip
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 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