Skip to main content
Site Builder
Indiana University
Content Components

Code

Embed code into a page

Included on:

Overview

The Code component allows you to embed custom code—HTML, CSS, JavaScript, or PHP—directly into a page.

Common uses

  • Inserting code for embedded FireForms
  • Embedding a custom JavaScript widget
  • Integrating with an external data source using PHP
This component is for embedding code, not showing code examples. If you need to show example code as part of technical documentation, use the Code Snippet component instead.

Component fields

Element name Required Multiple
Name Internal name for the embedded code block. Visible only within the WCMS (not on the published page).
Yes No
Code file

Code file to embed (HTML, CSS, JavaScript, or PHP). Store custom code files in the site’s _code folder.

Note: PHP cannot be executed in WCMS preview. A placeholder appears instead.
Yes No

Embedding HTML using the Code component

  • Wrap your code in a single parent element
    Place all of your embedded HTML inside a single container element, such as a <div>, so the markup can be processed correctly.
  • Embed a snippet, not a full HTML document
    Paste only the HTML you want to display. Do not include <html>, <head>, <body>, <!DOCTYPE>, or other document-level markup.
  • Use XHTML instead of HTML5
    The WCMS processes embedded markup as XHTML. If your code is written in HTML5, convert it to valid XHTML before pasting it into the Code component to help avoid render errors.
  • Publish code files
    When you publish a page that uses a Code component, also publish any relevant files in your site's _code folder.

Do

  • Use the Code component for integrations or widgets that cannot be implemented as standard Site Builder components
  • Keep embedded code simple and focused on a single task
  • Wrap embedded HTML in a single top-level element (<section>, <div>, etc.)
  • Scope or namespace CSS and JavaScript to prevent conflicts with other Site Builder code
  • Ensure all code follows IU security policies and best practices
  • Put all custom code in your site's _code folder

Don't

  • Use to embed page-specific CSS or JavaScript—use Page Settings instead
  • Embed code that makes purely aesthetic tweaks—use existing components and styles
  • Embed large or complex libraries that could slow down the page
  • Embed code in a language other than HTML, CSS, JavaScript, or PHP
  • Use to create new content components—develop or request a custom component instead
  • Put passwords, API keys, or other sensitive credentials in embedded code

Related content

  • Choosing Components

  • Learn to Use Site Builder