Smart Widget — 라이브

코드 하나. 어떤 레이아웃이든.

퍼블리셔가 자신의 사이트에 두 줄을 붙여넣으면, Boksero가 상품·서비스·게시물을 보여줍니다 — 검색 가능한 Box-sklep으로, 또는 그리드·리스트·캐러셀·단일 카드로. 아래 내용은 모두 실제로 작동하는 진짜 위젯입니다: "구매"를 클릭하고, 스크롤하고, 탭을 전환하고, 검색해 보세요.

2 줄의 코드12 개의 레이아웃3 개의 상품 레이어21 개 언어

Box-sklep — 박스 전체 검색

고정된 레이아웃 대신 — 해당 박스에 승인된 모든 오퍼의 검색 가능한 카탈로그를 위젯 안에서 바로: 텍스트, 유형, 카테고리, 가격, 재고, 상태. 구매자는 퍼블리셔의 사이트를 떠나지 않고도 필터링할 수 있습니다. 동일한 카탈로그는 독립된 페이지로도 존재하며 — 바이오 링크나 Smart Link에 적합합니다.

Box-sklep

검색창, 유형별 탭, 카테고리/가격/재고 필터, 페이지네이션 — 하나의 형식, 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>

스와이프 및 자동 회전

휴대폰에서는 손가락으로 스와이프하고, 컴퓨터에서는 휠이나 화살표를 사용합니다. 캐러셀은 스스로 오퍼를 회전시킵니다.

스와이프 리스트

"스토리"처럼 가로로 늘어선 오퍼 띠. 한 줄만 차지하며 원하는 만큼 항목을 담을 수 있습니다.

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>

캐러셀(회전)

중앙에 오퍼 하나, 자동 슬라이드 전환, 수동 스크롤도 가능.

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>

단일 카드와 미니 버전

페이지 모서리나 글 중간에 오퍼 하나 — 공간을 차지하지 않습니다.

단일 카드

콘텐츠 안에서 돋보이는 큰 오퍼 하나.

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 스타일링 엔진을 통해 자동으로도 가능). 하나의 박스에서 상품, 서비스, 게시물을 함께 보여줄 수 있습니다.

다크 테마

어두운 배경, 녹색 포인트, 기능은 동일합니다.

맞춤 색상
삽입 코드 보기
<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>

상품, 서비스, 게시물

탭 전환기: 상품 판매, 서비스 예약, 게시물(예: 중고 자전거)을 하나의 박스에서.

레이어 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="YOUR-EMBED-KEY" api-url="https://boksero.com/api/v1"></boksero-box>