> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add custom code to pages

> Add custom CSS or Javascript to one or all pages of a website.

Add **custom code** to a single page or all pages on your website. If you want to edit the underlying code of your pages, see [Access the Code Editor](/articles/website/pages/how-to-access-the-code-editor).

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/m3yy3e42j4" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Warning>
  **Important:** Be careful when adding custom code to your site. If you're adding code from a third-party, make sure you trust them - their custom code might surface negative consequences.
</Warning>

## Add custom code to a single page

### Page settings

1. Under **Website**, navigate to the website or landing page you want to edit.
2. Next to the page, click the **Customize** button.
3. In the page builder, click the **Settings** tab. <img src="https://mintcdn.com/kajabi-support/-nMQfkmFkYSVaJMU/images/Custom-Code1.png?fit=max&auto=format&n=-nMQfkmFkYSVaJMU&q=85&s=70393961486ba9584cdb902dc2ca686b" alt="Custom Code1" width="1225" height="535" data-path="images/Custom-Code1.png" />
4. Click the **Custom Code** section.
5. Add your **Custom CSS** or **Custom JavaScript** in the panel.
   <img src="https://mintcdn.com/kajabi-support/-nMQfkmFkYSVaJMU/images/Custom-Code2.png?fit=max&auto=format&n=-nMQfkmFkYSVaJMU&q=85&s=26a5bcd6e993151d12ab7c034f738413" alt="Custom Code2" width="1226" height="769" data-path="images/Custom-Code2.png" />
6. Click **Save**.

<Note>
  **Note:** Do not include **`<style>`** or **`<script>`** tags in the **Custom CSS** or **Custom JavaScript** sections within page **Settings**.
</Note>

### Custom code block

Adding custom code in a block can be helpful for embedding content on your page, such as a calendar booking widget.

1. From the Dashboard, open **Website**.
2. Locate the **Website Page** or **Landing Page** you want to edit and click the **Page Title**.
3. In the page builder, open a **Section**.
4. Click **Add block**.
   <img src="https://mintcdn.com/kajabi-support/-nMQfkmFkYSVaJMU/images/add-block.png?fit=max&auto=format&n=-nMQfkmFkYSVaJMU&q=85&s=afbaf39c90175643aeb445edca0005f1" alt="Add Block" width="829" height="537" data-path="images/add-block.png" />
5. Click **Custom Code**.
   <img src="https://mintcdn.com/kajabi-support/-nMQfkmFkYSVaJMU/images/add-block2.png?fit=max&auto=format&n=-nMQfkmFkYSVaJMU&q=85&s=8faac8478fd0859415c6e27d965f4bf3" alt="Add Block2" width="782" height="536" data-path="images/add-block2.png" />
6. Add your custom CSS or Javascript in the **Code** field.
7. Add additional settings for the block's **Background** and **Layout**, as well as any **Animations** and **Time reveal** settings.
8. Click **Save**.

<Note>
  **Note:** In a **Custom Code Block,** you'll need to use `<style>` (for CSS) and `<script>` (for JavaScript) tags in order for your custom code to work.
</Note>

## Add custom code to all pages

Adding custom code to all pages can be helpful, such as [adding a cookie disclaimer](/articles/website/pages/cookies-and-cookie-disclaimers), custom fonts, analytics, or more to your website.

1. From the Dashboard, open **Settings.**
2. Under **Site settings**, click [**Site details**](https://app.kajabi.com/admin/last_site/edit/site-details).
3. Under **Page scripts**, enter your custom code in the **Header Page Scripts** field.
4. Click **Save**.

<Note>
  **Note:** Custom code added to the Header Page Scripts field will be included in the `<head>` tag of every page on your website, except Offer checkout pages and upsell pages. To add tracking code to checkout pages, see [Add a JavaScript tracking code to checkout pages](../../sales/checkout/how-to-add-a-javascript-tracking-code-to-your-checkout-pages).
</Note>
