# 기본 시나리오 생성

***

{% hint style="danger" %} <mark style="color:red;">**꼭 확인해 주세요!**</mark>

시나리오 배포까지 원하시는 경우,\
봇이 노출될[ <mark style="color:red;">**연동 채널**</mark>](https://happytalk.gitbook.io/happybot/setting/channel)이 있는 지 꼭! 체크해주세요!

\
[channel](https://happytalk.gitbook.io/happybot/setting/channel "mention")
{% endhint %}

***

## 1. 시나리오 편집화면으로 이동

{% hint style="success" %}
시나리오를 만들고 배포하기 위해서는 편집화면으로 이동해야합니다.
{% endhint %}

#### **👉 따라 해 보세요!**

> 생성한 **봇을 클릭**하거나, \
> 우측 상단의 <mark style="color:green;">**\[ ··· ]**</mark>을 누르고 <mark style="color:green;">**\[편집하기]**</mark>를 클릭하여 편집 화면으로 이동합니다.

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2FSyDADu7DcRkCEx6FFI8Q%2Fimage.png?alt=media&#x26;token=1c05e42d-9275-4ba9-b06b-3c1d5f7f39a1" alt=""><figcaption></figcaption></figure>

***

## 2. 시작메시지 설정하기

{% hint style="success" %}
시작 메시지는 웹페이지의 HOME과 같은 역할로, \
챗봇에서 가장 기본이 되는 페이지입니다.

&#x20;<mark style="color:green;">\* 처음으로 보여주고 싶은 블럭의 형태를 선택하고 메시지와 버튼을 추가하여 구성합니다.</mark>
{% endhint %}

#### **👉 따라 해 보세요!**

> 여기서는 <mark style="color:green;">**텍스트 카드 블럭**</mark>에 \
> \&#xNAN;**\[BEST 당일발송], \[채팅 상담]**&#xC774;라는 두 개의 버튼을 추가합니다.

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2F7lAjZSS0Qw80PCpMdVJw%2Fimage.png?alt=media&#x26;token=5b81a3c5-8063-4e51-8b32-0ec30f212428" alt=""><figcaption></figcaption></figure>

***

## 3. 시나리오 생성, 블럭 추가하기

{% hint style="success" %}
시작 메시지에 연결될 시나리오를 생성하고, 블럭을 추가합니다.
{% endhint %}

#### **👉 따라 해 보세요!**

> 1\) 시작 메시지 옆의 <mark style="color:green;">**\[시나리오 추가]**</mark> 버튼을 클릭해 새로운 시나리오를 생성합니다.
>
> 2\) 시나리오 <mark style="color:green;">타입을 선택</mark>합니다.
>
> 3\) 시나리오 <mark style="color:green;">**이름을 입력**</mark>합니다.
>
> 4\) 상품을 여러 개 보여주기 위해 <mark style="color:green;">**슬라이드 정사각 커머스 카드 형태의 블럭을 추가**</mark>합니다.

***

## 4. 블럭 편집하기

{% hint style="success" %}
추가한 블럭의 내용을 상세 편집합니다.\
블럭 타입에 따라서 설정 내용이 다르므로, 적절한 블럭을 선택하여 사용해야 합니다.

&#x20;\* 메시지 블럭에 대한 내용은 [<mark style="color:green;">**블럭 집중 탐구**</mark>](https://happytalk.gitbook.io/happybot/block_scenario/block)에서 확인하실 수 있습니다.\
\
[block](https://happytalk.gitbook.io/happybot/block_scenario/block "mention")
{% endhint %}

#### **👉 따라 해 보세요!**

> 1\) 이미지, 링크, 프로필, 가격, 상품명 등의 내용을 입력하고, 버튼도 추가하여\
> &#x20;   <mark style="color:green;">'슬라이드 #1'</mark>을 만듭니다.&#x20;
>
> 2\) <mark style="color:green;">'슬라이드 #2'</mark>도 동일하게 설정합니다.

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2FFo75BzpJCad9KcVumox0%2Fimage.png?alt=media&#x26;token=2249f863-332c-4cc9-9a71-6f147e6610c9" alt=""><figcaption><p>슬라이드 #1의 내용을 입력합니다.</p></figcaption></figure>

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2F0rfLa2itPNQ1lADx1qwK%2Fimage.png?alt=media&#x26;token=44db30ce-20c8-4d6f-87b5-3d897605a054" alt=""><figcaption><p>슬라이드 #1의 버튼을 설정합니다.</p></figcaption></figure>

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2F8RtlcUECzzSbn3DckCYK%2Fimage.png?alt=media&#x26;token=b4674d5f-7845-4a2a-a4a3-575088d41c9a" alt=""><figcaption><p>같은 방법으로 슬라이드 #2를 완성합니다.</p></figcaption></figure>

### 4-1. 블럭 복사하기

{% hint style="success" %}
편집한 블럭을 클립보드에 저장하여 원하는 위치에 복사본을 붙여넣기 할 수 있습니다.
{% endhint %}

#### **👉 따라 해 보세요!**

> 1\) 복사할 블럭의 우측 … 버튼을 클릭하여 '블럭 저장' 메뉴를 선택합니다.
>
> 2\) 저장한 블럭을 붙여넣을 위치에서 마우스 우클릭하여 '저장블럭 가져오기' 메뉴를 선택합니다.
>
> 2-1) 저장한 블럭을 다른 시나리오에 붙여넣을 수도 있습니다. 시나리오 목록에서 붙여넣을 시나리오를 선택한 후, 이동한 시나리오에서 마우스 우클릭으로 '저장블럭 가져오기' 메뉴를 선택해주세요.

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2F4J5shE42cqDjBKZfGkt3%2F%EB%B8%94%EB%A1%9D%20%EC%A0%80%EC%9E%A5%20step1.png?alt=media&#x26;token=ed6abe52-ba2e-4242-8841-5f8a59c1566e" alt=""><figcaption><p>복사할 블럭의 우측 … 버튼을 클릭하면 '블럭 저장' 메뉴를 선택할 수 있습니다.</p></figcaption></figure>

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2FEU4VJ2MYNqeWMxUSK3ms%2F%EB%B8%94%EB%A1%9D%20%EC%A0%80%EC%9E%A5%20step2.png?alt=media&#x26;token=40aa574a-ea72-4f39-98fd-9a30285bae8f" alt=""><figcaption><p>저장한 블럭을 붙여넣을 위치에 마우스 우클릭 후, '저장블럭 가져오기'를 선택해주세요.</p></figcaption></figure>

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2FRQIJ44JnSIPJiit12ZCR%2F%EB%B8%94%EB%A1%9D%20%EC%A0%80%EC%9E%A5%20step3.png?alt=media&#x26;token=6ea31ffd-8079-4646-9caf-89bb6673bb93" alt=""><figcaption><p>저장한 블럭이 붙여넣기 된 것을 확인하실 수 있습니다.</p></figcaption></figure>

***

## 5. 바로연결 버튼 추가하기

{% hint style="success" %}
바로연결 버튼을 추가하면, 특정 페이지로 빠르게 이동할 수 있습니다.\
\
추가바로연결 버튼은 **퀵버튼**이라고도 하며, \ <mark style="color:green;">**메시지 카드 아래에 간단하게 표시하는 작은 버튼**</mark>입니다.&#x20;

클릭 시 사라지는 일회성 버튼으로, \
다음 step이 아닌 블럭의 아래에 있는 화살표에 연결하면 블럭이 실행될 때마다 나타납니다.&#x20;
{% endhint %}

#### **👉 따라 해 보세요!**

> 1\) '바로연결' 블럭을 'BEST 당일발송' 블럭 아래에 위치 시켜 연결합니다.
>
> 2\) '바로연결' 블럭의 첫 번째 버튼 명을 '처음으로'로 작성하고, \
> &#x20;    버튼 기능은 '메시지연결 > 처음으로'로 선택해줍니다.

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2FCRNhFhdu2DNGc4vntQlI%2Fimage.png?alt=media&#x26;token=29cf6a92-178b-42ac-a6fc-4d1f5fd8bcc9" alt=""><figcaption></figcaption></figure>

***

## 6. 시나리오 연결, 활성화하기

{% hint style="success" %}
생성한 시나리오를 활성화 하고 시작메시지와 연결해야 정상 동작하게 됩니다.\
\
&#x20;<mark style="color:green;">\* 시작메시지 연결 전, 연결을 위한 시나리오가 활성화 상태여야 합니다.</mark>
{% endhint %}

#### **👉 따라 해 보세요!**

> 1\) **시작 메시지**로 돌아와서 메인화면의 버튼과 위에서 만든 **시나리오를 연결**합니다.
>
> 2\) **\[BEST 당일발송]** 버튼에 **\[시나리오 연결]**&#xC744; 선택하고,\
> &#x20;  **\[BEST 당일발송]** 시나리오를 연결하여 버튼 클릭시 설정해둔 시나리오로 이동하도록 합니다.
>
> 3\) **\[채팅 상담]** 버튼에는 **\[상담사 연결]**&#xC744; 선택해서 바로 상담사와 채팅할 수 있도록 합니다.&#x20;
>
> 4\) 시나리오 이름 옆의 파란 버튼을 눌러서 시나리오를 활성화 해줍니다.
>
> 5\) 시작 메시지로 돌아와서 메인화면의 버튼과 위에서 만든 시나리오를 연결합니다.

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2Fg6EH5dv2ASR2H75toAU2%2Fimage.png?alt=media&#x26;token=a831ac1e-684a-4f2a-9661-706929da75e5" alt=""><figcaption></figcaption></figure>

***

## 7. 미리보기

{% hint style="success" %}
작업한 시나리오가 어떻게 작동하는지 확인하고 싶은 경우, \
블럭편집 위에 ![](https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2FwizW8UyP4moKxIfhKpto%2Fimage.png?alt=media\&token=fe2f59a8-939b-4d73-b270-4d66c7a88929) 아이콘을 클릭하여 <mark style="color:green;">**미리보기가 가능**</mark>합니다.

실제 챗봇에서처럼 버튼을 클릭하여 시나리오가 잘 연결되는지 확인할 수 있습니다.
{% endhint %}

#### **👉 따라 해 보세요!**

> 블럭 편집창 위의 미리보기![](https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2FXRseGUy2eYFcx7l8F7xk%2Fimage.png?alt=media\&token=e74b38c0-9c06-45dc-9ebe-c2298ae9bb6e) 아이콘을 클릭하여, 시나리오가 잘 동작하는지 테스트  합니다.

<figure><img src="https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2FnnUuxgsRdVrxPpnfqqnX%2Fimage.png?alt=media&#x26;token=c934aeef-563f-424f-a648-e1d346d67f0f" alt=""><figcaption></figcaption></figure>

***

## 8. 배포하기

{% hint style="success" %}
생성한 시나리오를 봇에 배포하면 완성됩니다.
{% endhint %}

#### **👉 따라 해 보세요!**

> 블럭 편집창 위의 미리보기![](https://3240612988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pepGQKkozVFbob9lhxe%2Fuploads%2FXRseGUy2eYFcx7l8F7xk%2Fimage.png?alt=media\&token=e74b38c0-9c06-45dc-9ebe-c2298ae9bb6e) 아이콘을 클릭하여, 시나리오가 잘 동작하는지 테스트  합니다.
