> For the complete documentation index, see [llms.txt](https://en.help.firstline.cc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://en.help.firstline.cc/feature/knowledge-base/helpdesk/extended-custom-html.md).

# Extended custom HTML

## Overview

Located in "Enterprise Settings" under "Applications", click the "Help Center" tab, in the "**Embed custom HTML**" field enter the CSS or JavaScript syntax you need; you can additionally extend the page's extra styles or functions, such as:

1. Advanced adjustment of specific button colors
2. Install FIRST LINE live chat
3. Install additional apps like GTM

... other applications.

## Usage examples

### Adjust website icon

Enter the HTML icon syntax in the field, example:

```html
// Replace the URL link in href
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon.ico">
```

### Use Meta Pixel

Through Meta [Events Manager](https://facebook.com/events_manager2)Embed the pixel code on the website, example:

```javascript
// Please use the corresponding and latest embed code provided by Meta
<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxxxxxxxxxxxxxx');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxx&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
```

<figure><img src="https://3300265106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2Fz3hDweAryCeZgDHAthP9%2F%E6%88%AA%E5%9C%96%202022-08-25%2009.48.53.png?alt=media&amp;token=c8d74e9e-74bb-4d10-91ee-b6790a5f425f" alt=""><figcaption></figcaption></figure>

### Adjust specific colors

For components on the webpage, use developer tools to find the class or id that corresponds to the component to modify and adjust it, example:

```html
// Note, we do not recommend this method; in future version updates, component names may differ from the originals, and you may need to readjust.

<style>
.top-item-link { background: red }
</style>
```

<figure><img src="https://3300265106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNRu7dk70ei7JV9HlW9%2Fuploads%2FRi9pxmrRA849Ac96Iuak%2F%E6%88%AA%E5%9C%96%202022-08-25%2009.49.52.png?alt=media&amp;token=b9f0bbf2-2d61-4d4c-8f89-8342a3280ec8" alt=""><figcaption></figcaption></figure>