# \[단일] 와이드 커머스 카드

***

##  1. ![](/files/RxKdiE1rB6TuV7xsrdRG) '와이드 커머스 카드' 란?

{% hint style="success" %} <mark style="color:green;">**판매자의 프로필을 설정하여**</mark> \ <mark style="color:green;">**판매할 상품(상품소개, 가격, 할인가  등)을 소개하는 메시지 카드**</mark>입니다.\
\
이 와이드 커머스카드를 슬라이드 형태로 여러개 제공하고 싶다면.\
\[슬라이드] 와이드  커머스 카드를 사용하시면 됩니다.<br>

[\[슬라이드\] 와이드 커머스 카드](/happybot/block_scenario/block/slide/widecommerce.md)
{% endhint %}

<figure><img src="/files/SDJBEOZaJxNtZwZcFPJi" alt=""><figcaption></figcaption></figure>

***

## 2. 블럭의 형태 및 사용 방법

<figure><img src="/files/lrGrX35DwewTWyHhloYf" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %} <mark style="color:red;">**주의 사항**</mark>

* 모든 글자 수는 띄어쓰기가 포함되며, 한글/영문/숫자/공백 모두 한 글자로 취급합니다.
* 버튼명의 경우 카카오는 최대 14자만 노출됩니다.
* 이미지 업로드 시 1MB 미만의 JPG, PNG만 지원됩니다.
  {% endhint %}

<table><thead><tr><th width="80">No</th><th width="178">구분</th><th width="71">필수</th><th>설명</th></tr></thead><tbody><tr><td>①</td><td>블럭 타이틀</td><td>X</td><td><ul><li>40자 이하 입력/수정 가능 </li><li>생성 시 “<em>와이드 커머스 카드 {No}</em>” 형태로 생성 됨</li></ul></td></tr><tr><td>②</td><td>이미지 등록</td><td>O</td><td><ul><li>800 * 400 사이즈 권장</li><li>1MB(1,000KB) 미만의 이미지 파일(JPG, PNG)만 지원</li></ul></td></tr><tr><td>③</td><td>프로필 이미지</td><td>X</td><td><ul><li>300 * 300 사이즈 권장</li><li>프로필명은 80자 이하로만 입력/수정 가능</li><li>프로필 영역 클릭 시 연결될 URL 입력하여 연결 가능</li></ul></td></tr><tr><td>④</td><td>상품명</td><td>X</td><td><ul><li>30자 이하 입력/수정 가능</li></ul></td></tr><tr><td>⑤</td><td>가격설정</td><td>O</td><td><ul><li>1원 ~ 9,999,999원 가격 입력만 가능</li><li>할인가 적용 희망시, 할인적용 ON하여 할인 가격(or 할인율) 입력 가능하며 할인가 입력 시 실판매가 금액이 노출됨</li></ul></td></tr><tr><td>⑥</td><td>상품 설명</td><td>X</td><td><ul><li>80자 이하 입력/수정 가능</li></ul></td></tr><tr><td>⑦</td><td>버튼</td><td>O</td><td><ul><li>최소 1개(필수) ~ 최대 3개까지만 설정 가능</li><li>50자 이하 입력/수정 가능</li><li>카카오는 최대 14자, 웹채팅 50자, 인스타 약 30자만 노출됨</li></ul></td></tr><tr><td>⑧</td><td>서브 블럭 연결 버튼</td><td>O</td><td><ul><li>해당 블럭과 연결될 블럭을 블럭 편집 창 or 마우스 Drag&#x26;Drop으로 연결 가능</li></ul></td></tr><tr><td>⑨</td><td>블럭 연결 버튼</td><td>O</td><td><ul><li>버튼이 블럭 연결 버튼이거나 오픈빌더 플러그인 실행에서 다른 블럭을 연결 시도 할 때만 노출</li></ul></td></tr><tr><td>⑩</td><td>블럭 간략 설정 버튼</td><td>-</td><td><ul><li>클릭 시 아래 액션이 가능한 버튼 레이어 노출 <br>a. 미리보기 <br>b. 복제하기 <br>c. 내용접기 <br>d. 블럭 저장 <br>e. 블럭 삭제</li></ul></td></tr><tr><td>그외</td><td>블럭 적용 URL</td><td>X</td><td><ul><li>블럭에 적용될 링크 등록 가능</li></ul></td></tr></tbody></table>

***

## 3. 제공되는  버튼 기능

{% hint style="success" %} <mark style="color:green;">**와이드 커머스 카드에서 지원 가능한 버튼의 기능은 총 9가지 입니다.**</mark>

버튼에 변수 부여를 위한 파라미터 설정이 가능하며,

버튼 파라미터 부여 방법은 버튼 파라미터 설정에서 확인 가능하실 수 있습니다.<br>

[변수/파라미터 설정](/happybot/block_scenario/parameter.md)
{% endhint %}

![](/files/98VnNfwDQNF1m01Xv8W5)

<table><thead><tr><th width="240">버튼 기능</th><th>설명</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>메시지 연결</strong></td><td>다른 메시지 카드로 연결함</td><td></td></tr><tr><td><strong>시나리오 연결</strong></td><td>다른 시나리오의 시작점으로 연결함</td><td></td></tr><tr><td><strong>URL 링크</strong></td><td><p>입력한 URL 주소를 새창으로 연결함</p><p>(URL은 http:// 또는 https://로 시작되도록 입력)</p></td><td></td></tr><tr><td><strong>전화</strong></td><td>입력한 전화번호로 전화걸기(모바일에서만 가능)</td><td></td></tr><tr><td><strong>조건 버튼</strong></td><td>미리 조건을 설정하여 True/False에 따라 다른 버튼을 연결함<br>(True/False에 각각 연결하는 버튼은 나머지 8가지 중 선택 가능)</td><td></td></tr><tr><td><strong>다른 서비스 호출</strong></td><td>외부 연결 메시지 등록</td><td></td></tr><tr><td><strong>공유하기</strong></td><td>친구에게 공유하기</td><td></td></tr><tr><td><strong>채널 추가</strong></td><td>카카오톡 채널 추가하기</td><td></td></tr><tr><td><strong>오픈빌더 플러그인 실행</strong></td><td>오픈빌더 플러그인 실행</td><td></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://happytalk.gitbook.io/happybot/block_scenario/block/single/widecommerce.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.