Comps.gg Documentation

Appearance

Custom HTML ​

Put a provider's widget (a quiz, a reviews carousel, a booking form) in one spot on one page. Paste the HTML, styles and scripts the provider gave you into a Custom HTML block, and it runs on your live site exactly where the block sits. If a provider's instructions say "paste this into an HTML block", "code block" or "embed block", this is the block they mean.

Where to find it: in the Visual Builder on Site → Pages (/admin/pages). Open a page, click Add block and pick Custom HTML. It works on your homepage, on any Visual Builder page, and inside a Two Columns block. Only admins with settings access can add or change one. See Who can add and change Custom HTML.

Only paste code you trust

The code runs on your live site exactly as pasted, with the same power as anything else on the page. Paste it straight from the provider, never from a forum or an email you weren't expecting. If you're unsure about a snippet, ask us before you add it.

Switch custom scripts on first ​

Custom HTML blocks share their on/off switch with Custom scripts. It starts off on a new site, and while it's off every Custom HTML block is hidden on your site. Check it before you add your first block:

  1. Go to Settings → Advanced (/admin/settings?tab=advanced) and find the Custom scripts card.
  2. Look at the Scripts box under the switch. Anything in it starts running on every page when you switch it on, so clear out any old code you no longer want.
  3. Tick Enable custom scripts.
  4. Press Save.

If the switch is already ticked, there's nothing to do. Unticking it later turns off your custom scripts and every Custom HTML block in one go, without losing any code.

Add a provider's code to a page ​

  1. Go to Site → Pages and click the pencil on the page you want. For your homepage, it's the row with the amber System badge.
  2. Click Add block, type "html" and pick Custom HTML. The block is added at the bottom of the page and its settings panel slides in from the right.
  3. Paste the provider's code into the HTML box. Paste all of it, including any <style> and <script> parts. The counter under the box shows how much you've used out of 65,536 characters.
  4. Click Done.
  5. Drag the block up to where the widget should appear.
  6. Save the page: Update on your homepage or a published page, Publish on a draft.
  7. Open the live page and check the widget works. See Check it on your live site.

In the block list the row reads Custom HTML, with the size of your code and Admin only underneath, for example "1,240 characters · Admin only". Give it a Custom label in the settings panel (such as "Quiz card") if you have more than one.

Check it on your live site ​

The page builder never runs your code. It isn't safe to run a provider's script inside your admin area, so wherever the builder would show the block you get a placeholder card instead: Custom HTML — runs on your live site. That goes for Preview and for View on a draft.

So the only place to see the widget working is the live page:

  • Homepage: click Update, then open your site in a new tab.
  • A new page: it has to be published before the code runs. To test before you tell anyone, publish it but don't add it to your menu yet. Visitors can only reach it if they know the address (/your-slug).

The widget appears a moment after the rest of the page, once the page has loaded in the visitor's browser. That's expected.

If the placeholder card says Custom scripts are switched off in Settings → Advanced, so this block is hidden on your site, go back to Switch custom scripts on first.

Example: add a quiz to your homepage and give it its own page ​

Say you run a weekly quiz with JoltQuiz. JoltQuiz gives you two snippets: a small card for your homepage, and a fuller version for a dedicated "Quiz Night" page. Use the code JoltQuiz gives you for your own venue. The snippets below only show their shape.

Put the quiz card on your homepage ​

The card snippet is a short block of HTML with a <style> and a <script> in it, something like this:

html
<div class="quiz-card">
  <style>
    .quiz-card { max-width: 480px; margin: 0 auto; }
  </style>
  <script src="https://www.joltquiz.com/embed.js" data-venue="your-venue"></script>
</div>
  1. Go to Site → Pages and click the pencil on your homepage (the System row).
  2. Click Add block and pick Custom HTML.
  3. Paste the card snippet into HTML and click Done.
  4. Drag the block to where the card should sit, for example just under your competitions.
  5. Click Update. Homepage changes go live straight away.
  6. Open your homepage in a new tab and check the quiz card shows.

Give the quiz its own page ​

The page snippet has its own headings and "how to play" steps, and loads the same script with data-view="screen" so it shows the full quiz.

  1. On Site → Pages, click Create Page.
  2. Enter Quiz Night as the Title. The URL Slug fills in as quiz-night.
  3. Choose Visual Builder as the Editor Type.
  4. Click Add block, pick Custom HTML, paste the page snippet into HTML and click Done.
  5. Click Publish and confirm.
  6. Open /quiz-night on your site and check the quiz loads.
  7. Add the page to your menu: on Site → Menus, click Add Item next to Header Menu, leave the Type as Page, choose Quiz Night from Select a page... and click Add Item. See Add a page to the header or footer menu.

Put a widget beside other content ​

A Custom HTML block can go in either side of a Two Columns block, so you can put a booking widget beside a paragraph of text, or a quiz card beside an image.

  1. Add a Two Columns block, or open one you already have.
  2. Click Add block inside the column you want and pick Custom HTML.
  3. Paste the code, then save the page as usual.

The widget only gets the width of its column, so check it on a phone as well as a computer. See Put two blocks side by side for column widths and how columns stack on phones.

Change, hide or remove a Custom HTML block ​

  • Change the code: click the block's pencil, replace what's in HTML, click Done and save the page. Paste the provider's new snippet in full rather than editing their code by hand.
  • Hide one block for now: switch off its toggle and save. The code stays in the block, ready to switch back on.
  • Turn off every block at once: untick Enable custom scripts in Settings → Advanced and save. Use this if a widget breaks your site. Your admin area is never affected, so you can always get back in to do it. Note that it also turns off your Custom scripts.
  • Remove it: click the bin on the block's row, then save the page.

Choose between Custom HTML, Embed and Custom scripts ​

There are three ways to put a provider's code on your site. Pick by what the provider gave you and where it should appear.

UseWhen the provider gives youWhere it appears
Custom HTML blockHTML, styles and scripts to "paste into an HTML block"Exactly where you put the block, on one page
Embed blockA web address to show in a frame (or embed code with a src="https://…" address in it)Where you put the block, inside a frame
Custom scripts in Settings → AdvancedA tracking pixel or analytics tag that goes "before the closing body tag"Every page, with nothing visible

Try Embed first if the provider offers a plain web address. It runs the widget in a closed-off frame, so it can't affect the rest of your page. Use Custom HTML when the provider's instructions need their script to run on your page itself.

Who can add and change Custom HTML ​

Only admins with settings access can add, edit, show or hide, duplicate or remove a Custom HTML block. They're the same people who can edit Custom scripts in Settings → Advanced: the Admin role.

Admins without settings access, such as the Marketing role, can still work on pages that have a Custom HTML block:

  • Custom HTML isn't offered in their Add block picker.
  • An existing block shows an Admin only badge with a lock. Its toggle, duplicate and bin are greyed out, and its settings panel says Only an admin with settings access can change this block. You can still move it and rename it.
  • They can move the block, change its Custom label, edit the rest of the page and publish it.
  • A Two Columns block with a Custom HTML block inside it can't be shown, hidden, duplicated or removed by them either, because the block inside starts or stops with it.

Your site checks this when the page is saved, not just in the builder. A save from someone without settings access that changes a Custom HTML block is refused.

Things to know before you paste ​

  • Styles apply to the whole page. A <style> in the snippet works like custom CSS: it can change things outside the block too. If your buttons or headings change look after adding a widget, the snippet's styles are the cause. Ask the provider for a version that only styles its own widget.
  • It appears after the page loads. The rest of the page shows first, then the widget fills in.
  • Some scripts add things to the whole page. If a provider's script adds something outside the block (a floating chat button, say), it may add it again when a visitor goes to another page and comes back.
  • 64KB limit. Each block holds up to 65,536 characters. Provider snippets are almost always far smaller. If yours isn't, it's probably meant to go somewhere else (ask the provider), or it belongs in a Custom scripts paste instead.

Troubleshooting ​

The widget doesn't show on my site. Check, in order:

  1. Enable custom scripts is ticked in Settings → Advanced. While it's off, every Custom HTML block is hidden. The placeholder card in Preview tells you when it's off.
  2. The block's toggle is on. A hidden block is dimmed and tagged Hidden in the list.
  3. The page is published. Nothing runs on a draft, not even in the draft preview.
  4. You saved the page after pasting. Done closes the panel but doesn't save. Look for the amber Unsaved changes note.
  5. You pasted the whole snippet, including the <script> part. A snippet that's only a <div> usually needs its script to do anything.

If all five are fine, the problem is likely on the provider's side: check their setup instructions and your account with them.

I can only see a placeholder card in the builder. That's by design. The builder never runs the code, even in Preview. Save and check the live page.

Custom HTML isn't in the Add block picker. Your admin account doesn't have settings access. Ask an admin who does to add the block for you.

The block shows "Admin only" and I can't change it. Same reason: only admins with settings access can change it. You can still move the block, rename it and edit the rest of the page.

My save was refused with a message about Custom HTML blocks. Your account doesn't have settings access, and the save would have added, changed, shown or hidden, duplicated or removed a Custom HTML block. Switching the page to the Simple Editor counts too, because that clears every block. Undo that change (or leave without saving and reopen the page) and save again.

The counter under the HTML box has turned red. The code is over 65,536 characters, and the counter says too long to save. Check you haven't pasted the snippet twice, or pasted a whole web page by mistake.

My site looks different since I added a widget. The snippet's styles apply to the whole page. Switch the block's toggle off and save to confirm it's the cause, then ask the provider for a version that only styles its own widget.

A widget broke my site. Untick Enable custom scripts in Settings → Advanced and save. That turns off every Custom HTML block and your custom scripts at once, and keeps all the code. Then remove or fix the block that caused it and switch the setting back on.