Your quiz card on your website

1. Put it on your site

1. In JoltQuiz go to Quizzes & settings → Website & camera. Your line of code is at the top, ready to copy.
2. On your website, add a block that takes your own HTML. Most site builders call it Custom HTML, Embed or Code (WordPress: Custom HTML block; Wix: Embed code; Squarespace: Code block; Shopify: Custom Liquid).
3. Paste the line in, save and publish. The card appears where the block is.

The line looks like this, with your own venue name in it:

<script src="https://www.joltquiz.com/embed.js" data-venue="your-venue"></script>

The card fills the width it is given. To stop it getting too wide, add data-width with the most pixels you want:

<script src="https://www.joltquiz.com/embed.js" data-venue="your-venue" data-width="520"></script>

No code on your site, or posting on Facebook? The same page gives you a link to share instead. It opens the same card as a page of its own.

The card sets its own height, so there is never a scroll bar or a gap under it. It updates by itself: nobody has to reload your page when the doors open.

2. Match it without code

Most venues never need CSS. On the same page, under How it looks:

• Style templates: JoltQuiz neon, Clean light, Gold luxe, Minimal outline, Bold, or My brand colours (built from the colours you set in Branding). Press one to start from it.
• Colours: card background, text, buttons and numbers, second colour (badges and glow), and lines and border. Use the colour picker, or type a hex code such as #1E90FF to match your site exactly.
• Heading font and text font: ten Google fonts to choose from.
• Your logo size: small, medium, large or extra large. Your logo comes from Branding.
• Corners: from square to very round.
• Show your name next to the logo: turn it off if your logo already has your name in it.
• Text: left, or centred.

See every stage. Above the preview, Show it as switches between what your website shows right now, a quiz coming up (the countdown), doors open (join code and QR), live now, and nothing booked. It uses a sample quiz so you can check every part before a real one.

Keep a look as a template. Type a name next to Save as a template and press it. Your look, CSS included, appears under Your templates, and one press brings it all back. Only you see your templates. Up to 12; press the × on one twice to remove it.

Everything shows in the Preview straight away. Nothing changes on your website until you press Save the look. Back to the JoltQuiz look undoes it all.

3. Your own CSS

For an exact match, type your CSS in the Your own CSS box under How it looks.

1. Set the template, colours and fonts first. Your CSS is added on top of them, so you only write what is different.
2. Type or paste your CSS. The preview updates as you type.
3. Press Save the look. If something is not allowed, the message says which line and why, and nothing is saved.

It only ever changes the quiz card. It cannot reach the rest of your website, and your website’s own CSS cannot reach the card (it sits in its own frame). So the card will not pick up your site’s fonts or colours by itself: you set them here.

4. Every part, named

The card changes with the time: a countdown before your quiz, the join code and QR while the doors are open or the quiz is live, and a message the rest of the time. These are the names to use in your CSS.

The card also carries the settings you chose, so you can write CSS for one of them only:

• #card[data-style="neon"], "flat", "outline" or "luxe": the style template.
• #card[data-logo="small"], "medium", "large" or "xlarge": the logo size.
• #card[data-name="0"]: your name is turned off.
• #card[data-align="center"]: the text is centred.

5. Colour settings

The colour boxes set these CSS variables. Use them in your own CSS with var(--accent) and so on, and every rule you write follows the colours you pick. You can also set them in CSS on #card.

6. Copy-and-paste examples

Each of these works on its own. Paste as many as you like into the box, one after another, and change the values to suit. Put any @import line at the very top.

Use your website’s own font

Find the font on Google Fonts, press Get font then Get embed code, and copy the address from the @import option.

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
#card .lc-title { font-family: "Lobster", cursive; }

A photo behind the card

The dark layer on top keeps the writing readable. The picture must be on an https:// address.

#card {
  background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .65)),
              url("https://example.com/your-picture.jpg") center / cover;
}

A bigger Join button

#card .lc-go { font-size: 1.25rem; padding: 18px 36px; border-radius: 999px; }

Square buttons, boxes and code

#card .lc-btn, #card .lc-tile, #card .lc-code b, #card .lc-scan img { border-radius: 2px; }

Light countdown boxes

#card .lc-tile { background: #FFFFFF; border-color: #FFFFFF; }
#card .lc-tile b { color: #111111; }
#card .lc-tile em { color: #555555; }

Everything centred

The Text setting does this without code. This is the same thing in CSS, if you want to centre only some parts.

#card { text-align: center; }
#card .lc-head, #card .lc-tiles, #card .lc-acts, #card .lc-code, #card .lc-foot { justify-content: center; }

A bigger QR code

#card .lc-scan img { width: 220px; height: 220px; }

Hide the Watch live button

#card .lc-watch { display: none; }

Your own “Live now” colour

#card { --live: #00C853; }

Line it up with the rest of your page

The card fills the width it is given. If the sections on your page sit in a centred column, give the card the same width and side margins so it lines up with them. Change 1100px and 18px to your own page’s.

#card { box-sizing: border-box; width: auto; max-width: 1100px; margin: 0 auto 24px; }
@media (max-width: 640px) { #card { margin: 0 18px 24px; } }

No shadow or glow round the card

#card { box-shadow: none; }

7. What is allowed

Your CSS is checked every time you save. It keeps your players safe and your card working.

• Pictures must be on an https:// address, or a data:image/ picture written into the CSS. Plain http:// is refused.
• Fonts can come from Google Fonts with @import url('https://fonts.googleapis.com/...'). No other @import is allowed.
• No HTML: the < character is refused, so it cannot hold a <style> or <script> tag. Old tricks that run code from CSS (expression(), javascript:, behavior, -moz-binding) are refused too.
• Up to 20,000 characters.
• The JoltQuiz logo stays. The “Powered by JoltQuiz” logo at the bottom must stay on the card, easy to see and clickable. You can change the words next to it and move it within the footer. If your CSS hides it, covers it, makes it smaller than about 40 by 20 pixels, fades it, blurs it, moves it off the card or stops it being clickable, the card switches your CSS off and shows your colours and fonts without it. The admin page tells you when that happens.

8. When something does not work

My change shows in the preview but not on my website.

Press Save the look, then reload your website. The preview shows changes before they are saved; your website only gets saved ones.

My CSS does nothing.

Put #card in front of the name, as the examples do: #card .lc-title rather than .lc-title. The style templates set some parts quite firmly, and #card makes sure your rule wins. Check the spelling of the name against section 4, and that every { has its }.

“Your CSS hides or covers the JoltQuiz logo at the bottom of the card, so it has been switched off.”

Something in your CSS covers or hides the logo at the bottom. Common causes: display: none on .lc-foot, a background or overlay placed over the footer, opacity on the whole card, or a very small height. Remove that rule and the rest of your CSS comes back.

“Line 3: url() must be an https:// address or a data:image.”

The message names the line. Change http:// to https://, or host the picture somewhere that has https.

The font does not change.

Put the @import line at the very top of the box, and use the font’s name exactly as Google Fonts writes it, in quotes.

I want to start again.

Press Back to the JoltQuiz look, then Save the look.

Still stuck? Email [email protected] with your venue name and what you are trying to do.