Skip to content
Dispresso logo
Sign in

Widgets

Put a widget on any website

Plain HTML, WordPress, Wix, Squarespace and Carrd, plus the common mistakes and how to test.

Every widget is two lines: a div and a script. Where you paste them depends on what built your site. This guide covers the common ones and the mistakes that bite.

The two lines
<div data-dispresso-game-server data-server="YOUR_LISTING_ID"></div>
<script src="https://dispresso.co/widgets/game-server.js?v=3" async></script>

Plain HTML#

Paste both lines into your page where the card should appear, anywhere inside <body>. The script can sit right under the div, or once at the bottom of the page for several widgets.

index.html
<!doctype html>
<html>
  <body>
    <h1>Our server</h1>
    <div data-dispresso-game-server data-server="YOUR_LISTING_ID"></div>
    <script src="https://dispresso.co/widgets/game-server.js?v=3" async></script>
  </body>
</html>

WordPress#

  1. 1
    Edit the page. Add a Custom HTML block (type /html).
  2. 2
    Paste both lines. Use Preview to see the card before you publish.
  3. 3
    If the card does not show, your role may not be allowed to post scripts (only administrators can on most sites). Ask an administrator, or use a page builder's HTML widget such as Elementor's.

Wix#

  1. 1
    In the editor choose Add, Embed Code, Embed HTML.
  2. 2
    Pick Code and paste both lines.
  3. 3
    Wix puts embeds in a frame with a fixed size. Drag it wide enough and tall enough for the card, about 160 pixels for one server, more for a list.

Squarespace#

  1. 1
    Edit the page, add a Code block.
  2. 2
    Paste both lines and turn off "Display Source" so it renders instead of printing the code.
  3. 3
    Code blocks need a plan that allows custom code. If you cannot add one, that plan is the reason, not the widget.

Carrd#

  1. 1
    Add an Embed element and set its type to Code.
  2. 2
    Paste both lines. Custom code embeds need a Carrd plan that allows them.

Webflow, Google Sites and others#

Any "embed", "custom code" or "HTML" element that accepts a script tag works the same way: paste the two lines. Site builders that only accept a link or an image (some notes apps, most social profiles) cannot run widgets.

Common mistakes#

What you seeUsually becauseFix
Nothing at allThe builder stripped the script, or only the div was pastedPaste both lines together into an HTML or Code element.
The code prints on the pageIt went into a text box, not a code blockUse the HTML or Code block, and turn off any "display source" option.
"This widget needs a data-server or data-game attribute"A typo such as data-servers, or curly quotes from a word processorRetype the attribute with plain straight quotes.
"Not listed right now" for a game serverWrong id, still pending review, or marked 18+Copy the number from your listing's address. See your game's guide.
The card is squashed or cut offThe builder's frame is too smallMake the embed area taller and wider. Cards are up to 420 pixels wide.
Works on a test page, not on the live siteYour site's Content Security Policy blocks itAllow script-src https://dispresso.co and connect-src https://api.dispresso.co.
Added it from a page that loads content later (React, Vue, tabs)The script only looks for widgets when it loadsAdd the div first and the script after it, or reload the script once the div exists.
My own class on the div disappearedUse an id and target that insteadGive the div an id, then style #your-id (see Styling in the widgets hub).

Testing before you publish#

Save the two lines in a file called test.html and open it in your browser. If it renders there, the snippet is right and any remaining problem is the site builder. You do not need a web server, the widgets run from a local file too.

Related#