Amazon Widget Demo

Client-Side JavaScript Widget

Single Product (Horizontal)

Embed Code

    <div class="amz-box" data-xid="B08N5KWB9H" data-lay="horizontal" data-tag="toolrank-20"></div>
    <script src="{{ROOT}}/card.min.js"></script>
    

Single Product (Vertical)

Embed Code

    <div class="amz-box" data-xid="B08N5KWB9H" data-lay="vertical" data-tag="toolrank-20"></div>
    <script src="{{ROOT}}/card.min.js"></script>
        

Single Product (Square)

Embed Code

    <div class="amz-box" data-xid="B08N5KWB9H" data-lay="square" data-tag="toolrank-20"></div>
    <script src="{{ROOT}}/card.min.js"></script>
        

Multiple Products (4x1 Grid)

Embed Code

    <div class="amz-box" data-xid="B08N5KWB9H,B07VGRJDFY,B0947BJ67M,B0CZKPF2QH" data-lay="grid" data-cols="4" data-tag="toolrank-20"></div>
    <script src="{{ROOT}}/card.min.js"></script>
    

Multiple Products (2x2 Grid)

Embed Code

    <div class="amz-box" data-xid="B071V8B4FL,B07VGRJDFY,B0947BJ67M,B0CZKPF2QH" data-lay="grid" data-cols="2" data-tag="toolrank-20"></div>
    <script src="{{ROOT}}/card.min.js"></script>
        

Keyword Search (4x1 Grid)

Embed Code

    <div class="amz-box" data-keyword="laptop" data-lay="grid" data-count="4" data-cols="4" data-tag="toolrank-20"></div>
    <script src="{{ROOT}}/card.min.js"></script>
    

Keyword Search (2x2 Grid)

Embed Code

    <div class="amz-box" data-keyword="laptop" data-lay="grid" data-count="4" data-cols="2" data-tag="toolrank-20"></div>
    <script src="{{ROOT}}/card.min.js"></script>

Keyword Search (Carousel)

Embed Code

    <div class="amz-box" data-keyword="headphones" data-lay="carousel" data-count="7" data-tag="toolrank-20"></div>
    <script src="{{ROOT}}/card.min.js"></script>
    

JS widget with <noscript> iframe fallback

This pattern renders the JavaScript widget in capable browsers, and provides a lightweight iframe for non-JS clients (or when scripts are blocked). The iframe is wrapped in <noscript> so it only appears when JS is disabled.

Embed Code (copy-paste)

        <!-- JavaScript widget (preferred) -->
        <div class="amz-box" data-xid="B08N5KWB9H" data-lay="horizontal" data-tag="toolrank-20"></div>
        <script src="/card.min.js"></script>

        <!-- Fallback for non-JS clients -->
        <noscript>
            <iframe src="{{ROOT}}/embed?asin=B08N5KWB9H&layout=horizontal&tag=toolrank-20" 
            style="width:100%;height:220px;border:none;overflow:hidden;"></iframe>
        </noscript>
        

Iframe Only

Single Product (Horizontal)

Embed Code

        <iframe 
        src="/embed?asin=B08N5KWB9H&layout=horizontal&tag=toolrank-20" 
        style="width: 100%; height: 220px; border: none; overflow: hidden;">
        </iframe>