HTML fields: Insert Cookiebot, GTM and other scripts in your online store

Do you need to add Cookiebot, Google Tag Manager, Facebook Pixel, a chat widget, or a verification code from Google Search Console to your online store? You can do this using the HTML fields in Shoporama. Here, you can enter the code you received from a third party yourself and choose whether it should be automatically inserted into the page’s or .

How to Find HTML Fields

1. In the left sidebar, you’ll find the Webshop section(marked with a gear icon)
2. Click on HTML Fields

How to create an HTML field

1. Click “Add New HTML Field”
2. Give the field a descriptive name without spaces, such as " cookiebot," " chat_widget," or " gsc_verify." The name is used as the tag name if you later want to manually call the field in a theme
3. Paste your code into the text field
4. Select Placement:
   • Insert at the end of ` ` for verification tags, Cookiebot, and scripts that need to load early
   • Insert at the end of for chat widgets and scripts that can wait
   • Do not add automatically if you want to control the placement yourself in a custom theme
5. Click Save

Where does the code end up in the page’s HTML?

The selection under " Placement " determines exactly where your code ends up. This is important to know when a third party provides specific instructions on where their script should be placed:

• Insert at the end of – the code is placed at the very end of the page’s , i.e., after the theme’s own meta tags, page title, and stylesheets, but before Shoporama’s own tracking script and before code from apps. This ensures that a cookie banner from this source has time to load before tracking begins
• Insert at the end of – the code is placed at the very bottom of the page, right after the theme’s own content and JavaScript. The page has finished rendering before your script starts running
• Do not add automatically – the code is not inserted on its own. It only appears when you call the field’s tag name in a theme

An HTML field you create under Webshop → HTML Fields will appear on all pages in the shop, including the cart, checkout, and receipt page. If you have multiple fields with the same placement, they are inserted in alphabetical order by field name. If two scripts need to load in a specific order, you can therefore control this through naming, e.g., 1_cookiebot and 2_chat.

The content is inserted exactly as you’ve written it. Shoporama does not modify your code, and any Smarty code in the field is not processed—the field contains pure HTML.

Typical uses

• Cookiebot – cookie consent banner. If you insert it into the tag, it can block other tracking scripts until the customer has given consent
• Google Search Console / Bing Webmaster Tools – verification meta tags that confirm you own the domain
• Hotjar, Microsoft Clarity, Mouseflow – heatmaps and session recordings
• Chat widgets – Tidio, Zendesk Chat, Intercom, Drift, and similar
• Custom HTML, CSS, or JavaScript – smart extra features in your own design

Example: verification codes for search engines and ad networks

Google Search Console, Bing Webmaster Tools, Pinterest, and Meta’s Business Manager all require proof that you own the domain before granting you access to data about your store. They provide a small meta tag that must be placed on your homepage. A meta tag only works if it’s placed within the page’s `` section, so the placement should always be “Insert at the end of ``.”

Create a single field—for example, “Verification”—and collect all your verification codes in it. A field can contain multiple lines:

Replace the values in content="..." with the ones you received from each provider, and include only the lines you actually need. If the provider offers multiple methods, choose the one labeled HTML tag or meta tag. That way, you won’t have to upload a file to your domain.

A Google Ads conversion ID, a GA4 Measurement ID, or a Facebook Pixel ID, on the other hand, should not be entered into an HTML field. You enter these under Webshop → Tracking, where Shoporama automatically links them to e-commerce events. See the section on HTML fields or Tracking further down.

Example: Chat widget and live chat

Tidio, Zendesk, Intercom, Crisp, Smartsupp, and most other chat tools provide you with a ready-made code snippet that you simply need to copy and paste. A chat bubble shouldn’t be the first thing the customer sees, and it’s fine if it loads after the rest of the page. That’s why it belongs at the bottom:

1. Click “Add New HTML Field” and name the field, for example, “chat_widget”
2. Paste the entire code snippet from the chat provider, including
3. Set “Placement” to “Insert at the end of ”
4. Click Save

The code snippet typically looks like this, where the ID is your account with the provider:

Heatmaps and session recordings from providers such as Hotjar, Microsoft Clarity, or Mouseflow are set up in the same way, but they need to load early to capture the entire visit. Always follow the provider’s own instructions: if their guide says “head,” you should select “Insert at the end of .”

If you use a cookie banner, keep in mind that chat, heatmaps, and similar tools often set cookies. They must therefore be configured according to the cookie banner’s instructions so that they only start running once the customer has given consent. Read more in our guide to cookie consent and Consent Mode.

Example: Custom CSS, JavaScript, and widgets

A small design tweak

If you just need to adjust a single detail without opening the theme, you can place your CSS in an HTML field with the location “Insert at the end of .” Because the field is inserted after the theme’s stylesheets, your rules will generally take precedence over the theme’s own:

Conversely, if you have a small piece of JavaScript that needs to run once the page has loaded, place it in a field with the location “Insert at the end of .” Keep this for minor adjustments: major design changes belong in the theme, where they’re easier to manage.

A widget that should appear in a specific location

Some widgets, such as review displays and price calculators, consist of two parts: a script that loads the tool, and a piece of HTML that determines where on the page the widget is rendered. Split them into two fields:

• Place the script itself in a field with the location set to “Insert at the end of ” or “Insert at the end of ,” depending on the provider’s recommendation
• Place the widget code in a field with the location “Do not add automatically” and specify the tag name as the location in the theme where the widget should appear

Further down in the section “Use HTML fields manually in a theme,” you can see how to specify the tag name.

HTML Fields or Tracking—Which Should I Use?

Shoporama also has a page under Webstore → Tracking with pre-built fields for the most commonly used tools:

• Microsoft Ads (Bing)
• Google Analytics 4 (Measurement ID)
• Google Ads Conversion ID
• Pinterest, Snapchat, TikTok, and LinkedIn
• Facebook Pixel ID and Conversion API

If you only have an ID for one of these tools, enter it under Tracking. Shoporama automatically handles the correct setup and e-commerce events. Only use HTML fields if you have a code snippet that doesn’t fit into one of the predefined fields, such as the full Cookiebot script or a verification tag.

Use HTML fields manually in a theme

If you have a custom theme and want to place an HTML field in a specific location in your template, set the field to “Do not add automatically” and call the tag name in your Smarty template:

<{$webshop->getHtmlField('cookiebot')}>

The content is rendered raw, so