How to show your online auction on your own website

What a good auction embed shows

Four things, and nothing else:

• The lots that are live now, with photo, title, current price and number of bids, and a countdown to each close that actually counts. A lot that has not opened yet shows its starting price and a countdown to its opening instead.
• A click that opens the lot on the auction site, in a new tab, so the visitor can bid without losing your page.
• Nothing when there is nothing. The block should disappear by itself when no lot is open or coming up. An embed that shows last month's sale, or "no auctions at the moment", tells every visitor you are not busy.
• Your look. Your accent colour and corner style, so it reads as part of your site and not as an advertisement.

What to avoid: an iframe of the whole auction site (two scrollbars, two headers, a broken phone layout), a screenshot that goes stale the day it is taken, and anything that asks visitors to log in on your site to see prices.

The two ways to do it

A script. One <script> line that draws the block and keeps it current. This is the normal way and works wherever your page builder lets you add "custom code", "embed HTML" or a "code block". It should set no cookies and load no fonts or trackers on your visitors' behalf; ask that of any widget you consider, because your privacy notice is the one that has to cover it.

A live image with a link. Some places refuse scripts: email signatures, newsletter builders, a few site builders' free plans, intranets. There, an image that is redrawn on the server every few minutes, wrapped in a link to the sale, does most of the job: it shows how many lots are live and when bidding closes, and it stays current in a page or an email sent weeks ago.

The line of code

For an auction site built on Auctify, the free AuctionAmigo widget is one line:

<script async src="https://auctionamigo.com/w.js"
  data-site="your-sale.myauctify.com" data-shape="horizontal"
  data-colour="#ffd23f" data-corners="8" data-background="light"></script>

Replace your-sale.myauctify.com with your auction site's address, with or without https://; an own domain works the same. The designer on this site's homepage writes the line for you with your colour and shape filled in, and shows the result before you copy it. The attributes:

It refreshes every two minutes, sets no cookies and stores nothing, loads no fonts and no trackers, draws inside its own shadow root so your styles and its styles leave each other alone, and renders nothing at all when the site has nothing open and nothing coming up. Bidding happens on the auction site, never inside the widget.

Which shape, and where on the page

Start with one placement, not three. The homepage, under the first screen, is the place most visitors see; a floating widget on every page is the second. Set the lot count to what the space holds: three lots in a narrow sidebar look better than twelve.

Where to paste it, builder by builder

Every builder has a box for other people's code; the names differ. Menu names below are as the builders label them at the time of writing and move around with redesigns, so if one has moved, search the builder's help for "embed code" or "custom code". Where a feature depends on the plan, it says so; check your own plan before assuming.

1. WordPress

   A Custom HTML block in the block editor, on the page you want, with the line pasted in; or a widget area for a sidebar. There is a separate guide to running an auction with a WordPress site that covers this and the question of plugins.

2. Wix

   In the editor: Add Elements → Embed Code → Embed HTML, paste the line into the element and size it. Wix runs embedded code inside its own frame, so pick an inline shape (horizontal, vertical or skyscraper) and make the element as large as the shape needs; a floating widget cannot leave that frame. Site-wide code goes in Settings → Custom Code, which Wix offers on its paid plans with a connected domain.

3. Squarespace

   Add a Code block where you want the lots and paste the line. Squarespace runs scripts in code blocks on its Business plan and above; on the Personal plan a code block shows HTML only, and a script does nothing. For every page at once, Settings → Advanced → Code Injection → Footer, which has the same plan requirement.

4. Jimdo

   Jimdo Creator: the Widget / HTML element, paste the line. Jimdo's newer editor has an HTML element on its paid plans. Pick an inline shape and give the element room.

5. Webflow

   Drag an Embed element onto the page and paste the line into it. Site-wide code goes in Site settings → Custom code → Footer code, which needs a paid site plan to publish.

6. Shopify

   Online Store → Themes → Customize, add a Custom Liquid block (or Custom HTML, depending on the theme) to the section where the lots should appear, and paste the line. The widget links out to the auction site; it does not add anything to the shop's cart.

7. Weebly and Google Sites

   Weebly: the Embed Code element. Google Sites: Insert → Embed → Embed code. Both run the code inside a frame of their own, so use an inline shape and size the element to it.

8. Plain HTML, or a developer

   Paste the line where the block should appear, or just before </body> with the floating shape. With data-target you can keep the tag in one place and have the widget draw into any element by its selector.

Where scripts are not allowed

Email signatures, newsletter tools, some builders' free plans and most intranets strip scripts. Use the live image there: a banner drawn on the server every few minutes showing how many lots are live and when bidding closes, wrapped in a link to the sale. In HTML it is an <a> around an <img>; in a newsletter tool it is "add image, set link". Because the image is redrawn, an email sent two weeks ago still shows the current count, and once the sale has ended it becomes a plain invitation to visit the auction site rather than a stale claim.

What a live image cannot do: show individual lots with prices, or count down. It is the fallback, not the first choice, and it belongs in an email far more than on a web page that could run the script.

Checking that it works

Open the page in a private browser window on a phone and on a computer. You should see the lots within a second or two. If you see nothing at all, it is one of three things, and the widget is silent about all of them on purpose, so that a visitor never sees an error:

• The auction site has nothing open and nothing coming up. List a lot, or check that bidding is actually open.
• The auction site is in private mode, so nothing about it is public. A private site cannot be shown anywhere.
• The address is wrong, or the element the builder gave the code is too small to draw into. Check the spelling of data-site, then make the element bigger.

Then wait two minutes after a bid on the auction site and confirm the price on your page has moved. From then on there is nothing to maintain: when the sale ends the block removes itself, and the next sale appears when its lots are listed.

Questions