Skip to main content

Tags

How to access on Fynd Platform

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.

QG1

Figure 1: Tags Settings

Creating a Tag

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

  1. Click Create

    QG1

    Figure 2: Creating Tags

  2. Enter the details.

    QG1

    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

    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

    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

Figure 6: Chat Widget

When the customers click the chat icon, a window pops up that will allow them to initiate the chat.

QG1

Figure 7: Chat Window


Extras

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

QG1

Figure 8: Inspecting Source Code Elements