위젯 코드란?
위젯 삽입 코드는 위젯 삽입 페이지에서 선택한 값에 따라 생성된 삽입 코드를 의미합니다. 아래 코드의 속성값을 변경하여 위젯의 형태 및 조건을 변경할 수 있습니다. 코드에 오타가 있으면 위젯이 노출되지 않을 수 있으니 코드를 넣는 방식과 친숙한 사용자분들에게만 해당 방식을 추천드립니다.
<shorts-works loop="true" posting-title="true" shape="story" type="group" access-key="11ec45abe65e22bebbc2baccc2206b681b06c267"></shorts-works>
HTML
복사
위 코드를 원하는 페이지에 넣으면 아래와 같이 보입니다. 코드의 속성값에 loop이 true로 들어가 있어 위젯에 포스팅이 많아서 아이콘들이 늘어나 삽입된 공간 영역을 벗어나게 되면 자동 롤링 기능이 활성화 되고, posting-title이 true로 되어 있어 위젯 하단에 포스팅 타이틀이 노출되고, shape은 위젯의 형태를 의미하는 속성으로 현재는 story로 되어있어, 인스타그램 스토리와 같은 모양으로 보입니다. type은 group으로 되어있어 개별 썸네일이 여러개인 위젯의 형태로 보입니다.
<shorts-works loop="true" posting-title="true" shape="story" type="group" access-key="11ec45abe65e22bebbc2baccc2206b681b06c267"></shorts-works>
HTML
복사
•
type (아이콘 형태)
◦
group: 여러개의 위젯이 붙은 형태로 보이는 일반적인 형태
<shorts-works type="group"></shorts-works>
HTML
복사
◦
single: 한개의 아이콘에 여러 쇼츠가 들어간 위젯을 삽입하고자 하는 경우
<shorts-works type="single"></shorts-works>
HTML
복사
•
shape(위젯의 모양)
◦
story (인스타그램 스토리 모양)
<shorts-works shape="story"></shorts-works>
HTML
복사
◦
shorts(유튜브 쇼츠 형태)
<shorts-works shape="shorts"></shorts-works>
HTML
복사
▪
플레이어 모드 (쇼츠 플레이어 모드를 선택하실 수 있습니다)
•
플레이어 모드는 쇼츠 형태에만 적용되는 옵션으로 플레이어 모드를 따로 지정하지 않으면 기본 쇼츠 플레이어로 재생됩니다.
•
임베드 모드(embed)
◦
상품 태그가 쇼츠에 함께 표시되며 상품 태그 터치/클릭 시 상세페이지로 바로 랜딩됩니다. 영상을 터치/클릭 해도 영상이 확대되며 커지지 않습니다.
<shorts-works player-mode="embed"></shorts-works>
HTML
복사
•
임베드+팝업 모드(embed-with-popup)
◦
임베드 모드와 동일하며 영상 터치 시 전체 화면으로 커지는 팝업부분이 추가된 모드입니다.
<shorts-works player-mode="embed-with-popup"></shorts-works>
HTML
복사
◦
embed(유튜브 쇼츠 형태가 상세페이지에 임베드 된 형태)
<shorts-works shape="embed"></shorts-works>
HTML
복사
아래는 임베드 위젯의 예시입니다
▪
embed-padding
•
임베드 테두리에는 기본적으로 “8px”의 여백이 상하좌우에 있습니다. 해당 테두리를 조정하여 가득차게 보여주고 싶거나 해당 여백을 조정하고 싶은 경우 수정이 가능합니다. 해당 속성은 임베드 shape에만 적용됩니다.
◦
적용 가능한 값은 픽셀(px), 퍼센트(%)로 적용 가능합니다.
<shorts-works shape="embed" embed-padding="0" ></shorts-works>
HTML
복사
여백을 없애고 싶은 경우 ‘0’으로 적용
<shorts-works shape="embed" embed-padding="10px" ></shorts-works>
HTML
복사
픽셀값으로 10px를 적용
<shorts-works shape="embed" embed-padding="5%" ></shorts-works>
HTML
복사
퍼센트로 5%로 적용
•
border (테두리 관련)
◦
border-start-color ,border-end-color (테두리 색깔)
▪
스토리 모양의 컬러를 6자리의 헥사값(HEX)으로 지정할 수 있습니다.
▪
쇼츠 모양인 경우 세부 설정 페이지에서 “쇼츠 테두리 사용” 으로 표시 여부를 선택할 수 있습니다.
▪
또한 쇼츠 테두리 사용 중이 아니여도 border-start-color, border-end-color를 추가 시 표시할 수 있습니다.
<shorts-works shape="story" border-start-color="#74acc8"></shorts-works>
JavaScript
복사
테두리의 색깔은 그라데이션으로 들어가며 시작/끝 색깔을 따로 지정할 수 있습니다.
◦
visible-border
▪
스토리와 쇼츠의 테두리가 설정된 경우, 테두리를 특정 위젯에서 보이지 않도록 설정 가능합니다.
<shorts-works shape="story" visible-border="false"></shorts-works>
JavaScript
복사
false로 하면 테두라기 보이지 않게 됩니다.
•
size (위젯 크기)
◦
small, basic, large
◦
아래의 width값과 같이 쓰는 경우 width 값을 우선합니다
◦
세부 설정에서 위젯 아이콘의 크기를 설정한 경우
<shorts-works size="basic"></shorts-works>
HTML
복사
•
posting-title (포스팅 타이틀)
◦
위젯 아이콘 하단 타이틀 표시 여부
◦
true/false
<shorts-works posting-title="true"></shorts-works>
HTML
복사
◦
posting-title-color (위젯 타이틀 컬러 변경)
<shorts-works posting-title-color="blue"></shorts-works>
HTML
복사
<shorts-works posting-title-color="#74ACC8"></shorts-works>
HTML
복사
•
hide-product-tag (상품 태그 카드)
◦
상품 태깅 표시
◦
true/false
<shorts-works hide-product-tag="true"></shorts-works>
HTML
복사
•
hide-like
◦
좋아요(우하단 하트모양) 표시 여부
◦
true/false
<shorts-works hide-like="true"></shorts-works>
HTML
복사
•
hide-title
◦
뷰어에서 타이틀을 숨길 수 있습니다.
◦
속성의 값은 true 또는 false로 가능하며 default는 false 입니다.
<shorts-works hide-title="true"></shorts-works>
JavaScript
복사
•
hide-player-controller
◦
플레이어 재생바, 뮤트, 닫기 버튼 등이 플레이어에서 숨김처리됩니다.
<shorts-works hide-player-controller="true"></shorts-works>
JavaScript
복사
•
display-play-icon (플레이 아이콘 오버레이)
◦
플레이 아이콘 오버레이를 감출 수 있습니다.
<shorts-works display-play-icon="false"></shorts-works>
JavaScript
복사
•
width
◦
위젯의 크기는 너비에 비례해서 커집니다.
◦
숫자를 넣으면 해당 숫자의 픽셀값 적용(300, 300px)
<shorts-works width="300"></shorts-works>
HTML
복사
◦
퍼센트의 경우, 삽입될 영역의 크기에 비중으로 반영됩니다
<shorts-works width="80%"></shorts-works>
HTML
복사
•
mobile-width (위젯의 모바일 뷰에서의 크기)
◦
위젯의 크기 (너비에 비례해서 커짐)
<shorts-works mobile-width="300"></shorts-works>
HTML
복사
◦
퍼센트의 경우, 삽입될 영역의 크기에 비중으로 반영
<shorts-works mobile-width="80%"></shorts-works>
HTML
복사
◦
width 값이 이미 있을 경우, PC 너비에서는 width의 크기로 반영되고, 모바일 화면 크기에서는 mobile-width 값이 적용됨
<shorts-works width="500" mobile-width="300"></shorts-works>
HTML
복사
PC에서는 500픽셀의 너비로, 모바일화면에서는 300픽셀의 너비로 크기 지정
•
view-size, mobile-view-size
◦
상세뷰의 뷰 크기를 조정할 수 있습니다.
◦
위젯의 크기 (너비에 비례해서 커짐)
<shorts-works view-size="300"></shorts-works>
HTML
복사
◦
퍼센트의 경우, 삽입될 영역의 크기에 비중으로 반영
<shorts-works view-size="80%"></shorts-works>
HTML
복사
◦
PC 너비에서는 view-size의 크기로 반영되고, 모바일 화면 크기에서는 mobile-view-size 값이 적용됨
<shorts-works view-size="500" mobile-view-size="300"></shorts-works>
HTML
복사
PC에서는 500픽셀의 너비로, 모바일화면에서는 300픽셀의 너비로 상세뷰 크기 지정
•
visible (PC/모바일 크기에서의 위젯)
◦
PC, mobile, all
◦
768픽셀의 가로 너비를 기준으로 PC, 모바일 크기를 구분함
<shorts-works visible="mobile"></shorts-works>
HTML
복사
•
gap (위젯 아이콘 사이의 간격)
◦
위젯 아이콘 사이의 간격을 값으로 지정
◦
아이콘 사이의 간격은 크기에 따라 자체적으로 비율 조정이 되지만 추가적으로 쇼츠 사이의 간격을 지정해야 할 경우
<shorts-works gap="20"></shorts-works>
HTML
복사
•
product-load-type (상세페이지 상품 매칭)
◦
auto: 상품 상세페이지에 위젯이 삽입된 경우 상품과 매칭되는 쇼츠만 자동으로 보여줍니다.
<shorts-works product-load-type="auto"></shorts-works>
HTML
복사
▪
product-id (옵션)
•
상품 ID를 지정하면 위젯에는 상품 상세페이지와 매칭되는 상품 및 따로 지정한 상품 ID가 표시됩니다.
<shorts-works product-load-type="auto" product-id="131, 142"></shorts-works>
HTML
복사
131, 142 이 태깅된 포스팅을 포함한 해당 상세페이지와 매칭된 상품을 불러옵니다.
◦
fixed: 상품ID가 포함된 것들을 포함해 매칭합니다.
▪
product-id (필수값)
•
상품ID는 보통 상품 상세페이지나 어드민의 상품 등록 페이지를 통해 알 수 있습니다.
•
상품 ID를 지정하면 위젯에는 지정한 상품 ID를 가진 포스팅이 표시됩니다.
<shorts-works product-load-type="fixed" product-id="131, 142"></shorts-works>
JavaScript
복사
131, 142 프로덕트 아이디를 가진 상품만 위젯에 불러옵니다.
•
posting-id (특정 포스팅만 보여주고 싶은 경우)
◦
posting-id는 웹 어드민의 [포스팅 관리] 메뉴에서 개별 포스팅의 메뉴에서 “퍼가기” 옵션을 선택하면 포스팅 ID값을 알 수 있습니다.
◦
단일로도 넣을 수 있고, 아래 코드와 같이 복수의 형태로도 넣을 수 있습니다.
<shorts-works posting-id="clu6c2yw900693v17sjrpko58, clu6oo6zw003e4b0w6wxtsan8"></shorts-works>
JavaScript
복사
•
pinned-posting-id (커스텀으로 핀할 포스팅)
◦
해당 속성을 활용하면 커스텀하게 먼저 보여주고 싶은 포스팅을 지정할 수 있습니다.
•
preview (미리보기 방식)
<shorts-works preview="slider"></shorts-works>
HTML
복사
◦
위젯의 아이콘에서 미리보기를 재생할 수 있습니다.
◦
넣을 수 있는 값 : focus, slider, all
◦
default 값은 slider 입니다.
◦
focus : 마우스를 올렸을 때 해당 미리보기를 재생합니다.(모바일에선 호버가 없으므로 동작하지 않습니다.)
◦
slider: 순서대로 미리보기를 재생하고 해당 아이콘의 미리보기가 끝나면 다음으로 넘어갑니다.
▪
type 이 single인 경우 포스팅이 끝나면 다음 아이콘이 보여집니다.
◦
all: 모든 아이콘의 미리보기를 바로 재생합니다.
•
sticky (모서리 등 특정 영역에 플로팅 형태로 띠우거나 웹사이트 특정 영역에 고정된 형태로 사용하고자 하는 경우)
<shorts-works mode="sticky" shape="shorts" sticky-side="bottom" sticky-align="start" sticky-side-offset="0 0 40 0"></shorts-works>
HTML
복사
◦
위젯을 특정 위치에 고정시킬 수 있습니다.
◦
mode 를 sticky 로 지정하면 sticky 위젯으로 지정됩니다.
◦
sticky-mode
▪
flexible 또는 attach
◦
sticky-side-offset
▪
해당 위젯의 여백(마진)값을 커스텀하게 지정
▪
싱글 값 적용시 주변 마진 값을 공통 적용
▪
배열 값으로 적용 시 마진 값과 유사하게 적용
◦
sticky-side
▪
top, bottom, left, right 로 지정할 수 있습니다.
▪
브라우저를 기준으로 상하좌우 포지션을 지정하는 목적으로 사용됩니다.
▪
위젯 type이 single이 아닌 경우 해당 속성이 적용되지 않습니다.
◦
sticky-align
▪
start, center, end 로 값을 지정할 수 있습니다.
▪
위젯 type이 group인 경우 해당 속성은 브라우저 위치에서 “상, 중, 하”로 인식됩니다.
◦
visible-scroll-position
▪
상단으로 특정 퍼센트/픽셀로 내려왔을때 스티키 위젯을 보여주도록 설정할 수 있습니다.
•
visible-widget-icon-count (썸네일 아이콘 개수 지정)
◦
지정되어 있지 않으면 브라우저 너비 만큼의 아이콘 개수를 가득 채워 보여줍니다.
◦
visible-widget-icon-count 와 visible-mobile-widget-icon-count 를 통해서 PC 사이즈와 mobile 사이즈에서 위젯이 보여줄 갯수 만큼의 크기로 지정이 가능합니다.
<shorts-works visible-widget-icon-count="3" visible-mobile-widget-icon-count="4"></shorts-works>
HTML
복사
•
fit-content (위젯 너비 최소화)
◦
위젯을 최소한의 너비만 영역을 차지하도록 설정하여 이미 존재하는 아이콘 주변에 삽입하는 등의 방식으로 활용하실 수 있습니다.
<shorts-works fit-content="true"></shorts-works>
HTML
복사
•
group-id (그룹 지정)
◦
쇼츠웍스 앱을 통해서 group를 지정하여 포스팅을 관리하실 수 있습니다. 그룹 아이디는 복수로도 지정 가능하며 원하는 그룹 안의 포스팅만 노출을 원할 경우 관리 페이지에서 그룹 ID를 복사하여 붙여주세요.
<shorts-works group-id="그룹아이디1, 그룹아이디2"></shorts-works>
HTML
복사
•
category-no (쇼핑몰 분류 카테고리 지정)
◦
쇼핑몰의 카테고리 페이지에서 여러개의 위젯 블록을 넣어 카테고리 분류 번호에 따라서 다른 위젯을 보여줄 수 있습니다. 위 그룹 지정 기능에서 만들어둔 그룹 아이디를 넣어 함께 활용하면 카테고리별로 각기 다른 그룹의 위젯을 보여줄 수 있습니다.
<shorts-works group-id="그룹아이디1, 그룹아이디2" category-no="80"></shorts-works>
HTML
복사
•
conversion-code (전환 추적 코드)
◦
전환 추적코드를 넣는 옵션을 위젯에 넣으면 위젯 단위에서 각 호스팅사에서 제공하는 상품 매출 전환 코드를 등록하여 성과를 트래킹할 수 있습니다.
◦
카페24의 경우는 &cafe_mkt={추적코드명}을 통해 자체 통계 페이지에서 전환 코드를 설정할 수 있습니다. (단, 쇼츠웍스 어드민의 세부설정에서 상품 아이디 포함 옵션이 켜진 경우 추적코드명 뒤에 상품 아이디 주소가 자동으로 붙게 됩니다. 상품단위의 트래킹을 원하실 경우 활용하실 수 있습니다)
<shorts-works conversion-code="shortsworks"></shorts-works>
HTML
복사
위와 같이 작성하면 카페24 통계 쿼리스트링은 “&cafe_mkt=”ue_shortsworks”로 들어가며 자체 통계에서 위젯 단위로 전환을 추적할 수 있습니다.
◦
플렉스지의 경우는 &ch_idx={추적코드}를 통해 매출 통계 페이지에서 쇼츠웍스를 통한 전환을 측정할 수 있습니다. 플렉스지의 전환 추적코드는 플렉스지에서 생성하셔야 하며 추적코드는 모두 숫자로 되어있습니다.
플렉스지 상품 추적코드 생성 방법
<shorts-works conversion-code="shortsworks"></shorts-works>
HTML
복사
위와 같이 작성하면 플렉스지 통계 쿼리스트링은 “&ch_idx=30”로 들어가며 매출 통계에서 위젯 단위로 전환을 추적할 수 있습니다.
•
style CSS적용
◦
권장드리는 방법은 아니지만 위젯의 상단이나 하단에 여백 등을 조절하시고 싶은 경우, CSS코드를 위젯 안에 넣어 적용하고 싶은 경우 다음과 같이 마진을 조절하실 수 있습니다. 해당 방법 보다는 div 컨테이너를 이용해서 해당 컨테이너에 style을 적용하는 방법을 추천드립니다.
<shorts-works style="margin-top:30px; margin-bottom: 30px;"></shorts-works>
HTML
복사