# 웹 폼 공유하기

***

## 1. 웹 폼 링크 공유하기

공유를 희망하는 웹 폼의 상세 화면으로 이동합니다.\ <kbd>공유</kbd> 탭에서 공유 링크를 `복사`하면, 웹 폼 링크가 클립보드에 저장되어 원하는 위치에 붙여넣을 수 있습니다.&#x20;

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FBBbw6GL5VhOazROEvIus%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20%E1%84%8B%E1%85%B5%E1%86%B7%E1%84%87%E1%85%A6%E1%84%83%E1%85%B31.png?alt=media&#x26;token=909a4c9b-193f-4f5e-be1c-4315f55ea38e" alt=""><figcaption><p>임베드 코드 복사</p></figcaption></figure>

## 2.웹 빌더에 웹 폼 임베드하기

Framer, webFlow, Wix 등 웹 빌더에 웹 폼을 임베드하는 경우를 알아봅니다.

### 2-1. Framer에 웹 폼 임베드하기

#### 1. 임베드 코드 복사

공유를 희망하는 웹 폼의 상세화면의 <kbd>공유</kbd> 탭에서 임베드 코드를 `복사`합니다.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FBBbw6GL5VhOazROEvIus%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20%E1%84%8B%E1%85%B5%E1%86%B7%E1%84%87%E1%85%A6%E1%84%83%E1%85%B31.png?alt=media&#x26;token=909a4c9b-193f-4f5e-be1c-4315f55ea38e" alt=""><figcaption><p><strong>임베드 코드</strong> 복사</p></figcaption></figure>

#### 2. Framer에서 임베드 컴포넌트 추가

Framer에서 **Embed** 컴포넌트를 선택해 웹페이지에 추가합니다.\
WebFlow 등 다른 웹 빌더를 사용하는 경우에도 외부 코드를 추가할 수 있는 컴포넌트를 선택하세요.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FlB3jwuJaGQ8LSmTzHct6%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20%E1%84%8B%E1%85%B5%E1%86%B7%E1%84%87%E1%85%A6%E1%84%83%E1%85%B32.png?alt=media&#x26;token=c72b4cdc-8c0a-417d-9b87-0b9cdc8e7a7a" alt=""><figcaption><p>임베드 컴포넌트 추가</p></figcaption></figure>

#### 3. HTML 코드 삽입

Embed 컴포넌트 내에 HTML 코드를 추가할 수 있는 영역에, 복사한 웹폼의 임베드 코드를 붙여넣습니다.\
이렇게 하면 웹폼이 성공적으로 임베드됩니다.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2F5Z2LnI8s1KbCVF4efNBe%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20%E1%84%8B%E1%85%B5%E1%86%B7%E1%84%87%E1%85%A6%E1%84%83%E1%85%B33.png?alt=media&#x26;token=76e629f6-9574-4916-985e-84f5c2cbece7" alt=""><figcaption><p>HTML 코드 삽입</p></figcaption></figure>

### 2-2. Notion에 웹 폼 임베드하기

Notion의 경우 세일즈맵 웹 폼의 HTML 임베드 코드를 노션에 적합한 URL로 변형해 주는 중간 작업이 필요합니다.

#### 1. Apption에서 변환

[apption.co](https://apption.co/embeds/new)에 접속해, 세일즈맵 웹폼의 임베드 코드를 붙여넣습니다. \
Apption이 이 코드를 Notion에 적합한 URL로 변환해줍니다.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FEwW9C3xz01a6NEk7Y4AL%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20%E1%84%8B%E1%85%B5%E1%86%B7%E1%84%87%E1%85%A6%E1%84%83%E1%85%B34.png?alt=media&#x26;token=8faf74b5-7d15-4574-bbe0-d30508bf5788" alt=""><figcaption><p>Notion 임베드1</p></figcaption></figure>

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2Fhv1vIbMASsAABy4GwzKG%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20%E1%84%8B%E1%85%B5%E1%86%B7%E1%84%87%E1%85%A6%E1%84%83%E1%85%B35.png?alt=media&#x26;token=efd2d0b5-6cd1-4cb9-8964-1f96ca7f015c" alt=""><figcaption><p>Notion 임베드2</p></figcaption></figure>

#### 2. Notion에 URL 임베드

생성된 URL을 복사해 Notion 페이지에 붙여넣으면 웹 폼이 임베드됩니다.

#### 3. UTM 파라미터 추가 (선택 사항)

만약 트래킹을 위해 UTM 파라미터를 추가하고 싶다면, 다음과 같이 생성된 URL 뒤에 원하는 UTM 정보를 입력하면 됩니다.&#x20;

```
ex)<https://apption.co/embeds/95028348?utm_source=apption&utm_campaign=C0001>
```

### 2-3. Wix에 웹 폼 임베드하기

#### 1. Wix에서 웹 폼을 임베드 할 섹션 선택

웹 폼을 임베드하실 섹션을 선택합니다.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FWiLEITgtZrxVZhJMEqOc%2Fimage.png?alt=media&#x26;token=10351b1b-31c2-4412-87ed-3b5ecc0af4b5" alt=""><figcaption></figcaption></figure>

#### 2. '코드 삽입 - HTML 삽입' 요소 추가

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FE5vjFVKnlNxcsJoNKh6y%2Fimage.png?alt=media&#x26;token=6e3cea12-3680-4bdd-abb8-1a1d476bc3b5" alt=""><figcaption></figcaption></figure>

#### 3. HTML 코드 삽입

세일즈맵에서 복사해온 임베드 코드를 붙여넣습니다.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FaQ6yklB5AcSunsFyNIai%2Fimage.png?alt=media&#x26;token=fea42a8d-e3b9-4012-87f3-7e3bfedd3dbf" alt=""><figcaption></figcaption></figure>

#### 4. 완료 확인

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2F4SrFy4aXudh9iAx96H1N%2Fimage.png?alt=media&#x26;token=61822236-2696-4b3c-b14c-582230008cc5" alt=""><figcaption></figcaption></figure>

#### 5. 제출 완료 유형을 '외부 링크로 이동'으로 설정한 경우

Wix에서는 기본적으로 외부 링크로 이동을 차단하고 있기 때문에 별도의 설정이 필요합니다.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FLMjZYUkkjNbDLZAVoLX3%2Fimage.png?alt=media&#x26;token=bcbb2858-c836-465a-80b3-5dcad1ecb43a" alt=""><figcaption></figcaption></figure>

#### 6. 개발자 모드 클릭

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FlHxAsJDFOrA3itcT9BE4%2Fimage.png?alt=media&#x26;token=e39f2bbd-4f08-439f-99e8-60fc1a8d21fe" alt=""><figcaption></figcaption></figure>

#### 7. 웹 폼이 임베드 된 페이지로 이동

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2F2Pr1pObz2sCCMFnlmcVI%2Fimage.png?alt=media&#x26;token=b1afe3fd-de8b-4af2-9f1c-a22902892257" alt=""><figcaption></figcaption></figure>

#### 8. 코드 교체

기존 코드를 제거하고 아래 코드를 그대로 붙여넣습니다.

```
// Velo API 레퍼런스: https://www.wix.com/velo/reference/api-overview/introduction
import wixLocation from 'wix-location-frontend';
$w.onReady(function () {
    $w('#salesmap-web-form').onMessage((event) => {
        let data = event.data;
        if (data.redirect) {
        wixLocation.to(data.redirect);
        }
    });
});

```

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FlYiFERBHSwSaAzGHPN1v%2Fimage.png?alt=media&#x26;token=60586bd6-93b9-49ae-9f2e-46463886b698" alt=""><figcaption></figcaption></figure>

#### 9. 웹 폼 ID 교체

세일즈맵 웹 폼 요소를 클릭하고 ID를 salesmap-web-form으로 교체합니다.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FMOZMgT7tL7lkJwLBspGI%2Fimage.png?alt=media&#x26;token=1fe0262d-2831-46ca-8954-b5a96e22beb6" alt=""><figcaption></figcaption></figure>

#### 10. 작동 확인

웹 폼 제출 시 페이지 이동이 잘 작동하는지 확인합니다. 일시적으로 캐시가 남아 이동이 안되는 현상이 발생할 수 있으니 시크릿 모드에서 테스트합니다.