# Tags

How to access on Fynd Commerce 
Commerce Panel → Sales Channel (select application) → Configuration → Tags

## Introduction

In this section you can add custom CSS or Javascript into the source code of your website with the help of tags. It is specially useful when you want to include a separate CSS for styling, or JavaScript for integrating utilities such as chat widgets, e.g. Intercom, Tawk, and many more.

## Creating a Tag

Let's create a tag to enable a chat widget (say Tawk.to) on your website.

1. Click **Create**
2. Enter the details.
![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/platform-panel/settings/tags/external-file.png)
Figure 3: Tag Details

  * **Name** - Enter the name for the tag, e.g. *Chat Widget JS*
  * **Choose file type** - Select CSS or JavaScript.
  * **Choose sub type** - Select whether the tag will be an external URL or an inline code. If you select **External** then you will have to add an external URL of your CSS/JS in the field, if you select **Inline** then you will have to insert a CSS/JavaScript code.
  * **Choose tag position** - Choose where the tag will be positioned, i.e. head tag, or top in the body tag or bottom in the body tag.
  * **URL** - Place the URL or the CSS/JavaScript here.
3. Your chat widget provider might have shared a JS code to add to the source code of your website.
![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/platform-panel/settings/tags/tawk-js.png)
Figure 4: JS Code Provided by Tawk (example)

4. Navigate back to the Tags page on sales channel settings, Select **JavaScript** in the file type, **Inline** in the sub type, and paste the code in the editor. For the tag position, choose **Body Bottom**.
![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/platform-panel/settings/tags/code-fill.png)
Figure 5: Pasting JS Code

5. Tick **Allow on all pages** to display the widget on all the pages of your website. Or you may selectively choose the pages (where you want the widget to appear) using the **Add tag on pages** dropdown .
6. Once the details are filled, click **Save**.


Go to your website, you can see the chat widget is visible at the bottom right corner of the screen.

![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/platform-panel/settings/tags/widget1.png)

center
em
Figure 6: Chat Widget
br
When the customers click the chat icon, a window pops up that will allow them to initiate the chat.

![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/platform-panel/settings/tags/widget2-PKrw-ISST.png)

center
em
Figure 7: Chat Window
br
## Extras

(For advanced users) You can inspect the page to check whether the code is successfully applied.

![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/platform-panel/settings/tags/inspect-code.png)

center
em
Figure 8: Inspecting Source Code Elements
br