Smart Widget — ライブ

1つのコード。どんなレイアウトにも。

パブリッシャーが自分のサイトに2行貼り付けるだけで、Boksero が商品・サービス・掲示を表示します——検索可能な Box-sklep として、またはグリッド、リスト、カルーセル、シングルカードとして。以下はすべて実際に動作する本物のウィジェットです：「購入」をクリックし、スクロールし、タブを切り替え、検索してみてください。

2 行のコード12 種類のレイアウト3 種類の商品レイヤー21 言語
決済は発生しません：この機能はまだ有効になっていません。オファーはサンプルデータ、画像はイメージです。

Box-sklep — ボックス全体を検索

固定レイアウトの代わりに——そのボックスに承認されたすべてのオファーを、ウィジェット内で直接検索できるカタログに：テキスト、種類、カテゴリー、価格、在庫、状態。購入者はパブリッシャーのサイトを離れることなく絞り込めます。同じカタログは独立したページとしても存在し、プロフィールリンクや Smart Link に最適です。

Box-sklep

検索ボックス、種類タブ、カテゴリー/価格/在庫フィルター、ページネーション——1つの形式、21言語対応。

BOX_SHOP
独立したページとして見る ↗
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-box-sklep" api-url="https://boksero.com/api/v1"></boksero-box>

グリッドとミニグリッド

複数のオファーを表示する定番のレイアウト——フルサイズのカードから、狭いカラム向けのコンパクト版まで。

グリッド

複数のオファーを一度に、写真・価格・「購入」ボタン付きで表示。カラム数はページ幅に合わせて調整されます。

GRID · ゆったり
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-siatka" api-url="https://boksero.com/api/v1"></boksero-box>

ミニグリッド

サイドバーや幅の狭いブログセクション向けの密なバージョン。

GRID · mini
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-mini-siatka" api-url="https://boksero.com/api/v1"></boksero-box>

縦リスト

オファーを縦に並べて表示——記事下やフッターに最適。

LIST · vertical
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-lista" api-url="https://boksero.com/api/v1"></boksero-box>

スワイプ＆自動回転

スマートフォンでは指でスワイプ、パソコンではホイールや矢印で操作。カルーセルはオファーを自動で切り替えます。

横スワイプリスト

「ストーリーズ」のような横一列のオファー帯。1行で済み、好きなだけ項目を表示できます。

LIST · horizontal
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-przesuwana" api-url="https://boksero.com/api/v1"></boksero-box>

カルーセル（自動回転）

中央に1つのオファー、自動スライド切り替え、手動スクロールも可能。

CAROUSEL · slide
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="cmu5slkid001hwsmin1855nn8" api-url="https://boksero.com/api/v1"></boksero-box>

フェードカルーセル

大きなカードとオファー間のなめらかなフェード切り替え。

CAROUSEL · fade
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-karuzela-fade" api-url="https://boksero.com/api/v1"></boksero-box>

表示ローテーション

どのオファーを表示するかをウィジェット自身が選び、切り替えます——訪問者ごとに違う組み合わせが表示されることもあります。

ROTATIONAL · grid
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-rotacja" api-url="https://boksero.com/api/v1"></boksero-box>

シングルカードとミニ版

ページの隅や記事の中に1つのオファーを——場所を取りません。

シングルカード

コンテンツ内で目立つ、1つの大きなオファー。

SINGLE · large
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-karta" api-url="https://boksero.com/api/v1"></boksero-box>

ミニカード

最小バージョン——コンテンツ内やサイドバーでのおすすめ表示に。

SINGLE · mini
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-mini-karta" api-url="https://boksero.com/api/v1"></boksero-box>

テーマとレイヤー

色、フォント、角の丸みはパブリッシャーのサイトに合わせて調整されます（AIスタイリングエンジンによる自動調整も可能）。1つのボックスで商品・サービス・掲示をまとめられます。

ダークテーマ

暗い背景にグリーンのアクセント、機能は同じです。

カスタムカラー
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-ciemny" api-url="https://boksero.com/api/v1"></boksero-box>

商品・サービス・掲示

タブ切り替え：1つのボックスで商品販売、サービス予約、掲示（例：中古自転車）をまとめて表示。

3レイヤー
埋め込みコードを表示
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="demo-warstwy" api-url="https://boksero.com/api/v1"></boksero-box>

スマートフォンでも同じボックス

ウィジェットはホストページに関係なくレスポンシブです。以下はスマートフォン幅（340px）のコンテナに収めた同じボックスです。

グリッド

横スワイプリスト

カルーセル

自分のサイトへの埋め込み方法

  1. パブリッシャーアカウントを作成し、パネルでウィジェットを作成——レイアウト、サイズ、テーマを選びます。
  2. オファーを選ぶ（販売手数料、CPC、または固定料金）——販売者が承認します。
  3. コードを貼り付けます。決済、手数料の分配、支払いはすべて Boksero が処理します。
<script src="https://boksero.com/widget/boksero-box.min.js" defer></script>
<boksero-box embed-key="あなたの-EMBED-KEY" api-url="https://boksero.com/api/v1"></boksero-box>
オファー検索を見る