> For the complete documentation index, see [llms.txt](https://docs.harnessgiving.cc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.harnessgiving.cc/elements-1/elements/custom-html.md).

# Custom HTML

Inject custom codes to your website

Code is the language that tells your web browser what it should look like and what it should do. Three of the core code types are **HTML, CSS,** and **Javascript**.

**HTML** tells your browser what content to show and where it should go**.**

{% tabs %}
{% tab title="HTML" %}
{% code title="Sample HTML" %}

```markup
<p>This is a paragraph.</p>
```

{% endcode %}
{% endtab %}
{% endtabs %}

**CSS** is responsible for the look/style. It allows you to apply a unique style to one HTML element at a time. You assign CSS to a specific HTML tag by using the style attribute with any CSS properties defined within it.

{% tabs %}
{% tab title="CSS" %}
{% code title="Sample CSS" %}

```css
<p style=“color: blue;“>This is a paragraph.</p>
```

{% endcode %}
{% endtab %}
{% endtabs %}

**Javascript** is a prototype-based, multi-paradigm scripting language that supports object-oriented, imperative, and functional programming styles.

The \<script> tag is used to define a client-side script.

{% tabs %}
{% tab title="JavaScript" %}
{% code title="Sample Javascript" %}

```javascript
<script>
document.getElementById(“demo”).innerHTML = “Hello JavaScript!“;
</script>
```

{% endcode %}
{% endtab %}
{% endtabs %}

If you want to add any of the above-mentioned codes to your site, you can use our **Custom HTML** element to do so!&#x20;

## &#x20;<a href="#save-edits" id="save-edits"></a>

### 1.  Add HTML Element

To get started, just drag and drop the ‘Custom HTML’ icon from the **Elements** section to the crafting area.

![Add HTML Element](https://downloads.intercomcdn.com/i/o/109119754/f73780cebf2c74f97b8cd8e1/Custom-HTML-1.png)

## &#x20;<a href="#save-edits" id="save-edits"></a>

### 2.  Insert HTML

Insert the desired HTML tags and click the **‘Save’** button.

![Insert HTML](https://downloads.intercomcdn.com/i/o/109119756/fbbc2be1a0cea1cf4bff807d/Custom-HTML-2.png)

## &#x20;<a href="#save-edits" id="save-edits"></a>

### 3.  Crop the element

To **crop** the added element, push the Crop Pointers and move them.

![Crop Element](https://downloads.intercomcdn.com/i/o/109119759/b668082462fc7647d7b8e75f/Custom-HTML-3.png)

## &#x20;<a href="#save-edits" id="save-edits"></a>

### **4**.  Edit HTML Element

Edit the Custom HTML Element by simply clicking on it and choosing the desired option from the ‘**Settings**’.<br>

![Click the ‘Save’ button once all the desired changes are made.](https://downloads.intercomcdn.com/i/o/109119768/90cf852812da2fec157b33ad/Custom-HTML-4.png)

{% hint style="info" %}
​🧙 **Tips:** The code will go active once you've connected a **Custom Domain** to your Harness website.
{% endhint %}

## &#x20;<a href="#save-edits" id="save-edits"></a>

### **4**. **Alignment**

To change the alignment settings of the Custom HTML Element, click on the ‘Alignment’ icon you’ll have three options available: top, center, bottom, just choose the one, you prefer.

![Update alignment](https://downloads.intercomcdn.com/i/o/109119775/dbfaf071d3e4691abdc14c10/Custom-HTML-5.png)

## &#x20;<a href="#save-edits" id="save-edits"></a>

### 5. **Delete**

If you don't need the Element anymore, Click on the **‘Trash’** icon to remove it from your page.<br>

![Trash can = Delete](https://downloads.intercomcdn.com/i/o/109119800/bd62464a6644b402029140a0/Custom-HTML-6.png)

{% hint style="success" %}
Need further help? Just hit the **Chat Box** in the lower right corner and drop us your questions. You'll surely receive a timely and friendly support from our team.
{% endhint %}