HT-12 In-article chip

Code

HT-12

Group

In-article

Use for

Mentioning a product mid-sentence

Place it

Inside a paragraph

Click a product to see the ht:click event.

Products, prices, ratings, sold counts and the countdown in the preview are sample data to show the layout, not real products. On your own site, use real numbers only.

Note for non-Vietnamese sites: HT-Kit v1.0 was built for Vietnamese affiliate sites. Its built-in labels (sold count, pros/cons headings, tier names) are in Vietnamese and prices are formatted in đồng (₫). Button text and block titles can be changed with attributes; the other labels cannot yet.

Snippet for HT-12

<span data-ht="HT-12"
     data-ht-src="#san-pham"
     data-ht-limit="1"></span>

Or call it from JavaScript: HTKit.render(target, 'HT-12', products, {cta: 'See price'})

First, once for the whole site

Load the kit:

<link rel="stylesheet" href="/htkit.css">
<script src="/htkit.js" defer></script>

Declare your product list:

<script type="application/json" id="san-pham">
[{"id":"q1","name":"Product name",
  "price":489000,"oldPrice":650000,
  "img":"anh.webp","url":"AFFILIATE-LINK",
  "rating":4.8,"sold":3200}]
</script>

Match your brand color: :root{--ht-accent:#d3306b}. Every link carries rel="nofollow sponsored noopener"; every click fires an ht:click event with {code, id, name, url}.

← HT-11 Review cardHT-13 3-tier price ladder →