Webflow 로직을 사용하여 Airtable에 항목 설정

Airtable을 통해 기업의 중요한 정보 데이터베이스를 생성하고 감독할 수 있습니다. Logic을 사용하면 양식 제출에서 Airtable로 잠재 고객의 연락처 정보와 같은 데이터를 전송하여 Webflow 웹사이트를 비즈니스 데이터베이스에 연결할 수 있습니다.

시작하기 전에: 아직 그렇게 하지 않으셨다면, 에어테이블 계정 생성 그리고 에어테이블 베이스. 또한 Airtable 테이블과 일치하는 필드가 있는 양식을 Webflow 사이트에 통합해야 합니다.

이 튜토리얼에서는 다음 내용을 자세히 살펴보겠습니다.

1. Airtable API 키를 구성하는 단계
2. 논리 흐름에 대한 인증을 설정하는 방법
3. Airtable documentation 찾기
4. HTTP 요청 설정
5. 흐름 테스트 및 배포
6. 흐름 관련 문제 해결

내부자 팁: 또한 Logic은 Make HTTP 요청 블록 또는 Incoming webhook 트리거를 사용하여 Airtable에서 Webflow CMS로의 데이터 동기화를 용이하게 합니다. Logic을 사용하여 HTTP 요청을 만드는 프로세스를 자세히 알아보세요.

Airtable API 키 생성

비밀번호와 마찬가지로 API 키(때때로 "액세스 토큰"이라고도 함)는 API에 HTTP 요청을 보내는 사이트나 애플리케이션을 식별합니다. Airtable에 데이터를 전송하려면 Airtable API 키가 필수적입니다.

Airtable API 키를 생성하려면 다음 안내를 따르세요.

1. Airtable 대시보드로 이동하세요.
2. 프로필 아이콘을 클릭하고 선택하세요. 계정
3. 스크롤하여 API 섹션을 클릭하고 토큰 생성
4. 탭하세요 새 토큰 만들기
5. 토큰에 이름을 지정하세요.
6. 드롭다운 메뉴에서 이 API 키에 대한 작업을 선택합니다(적어도 data.records:쓰기 Airtable로 데이터를 전송하기 위해 필요합니다)
7. 베이스를 선택하고 데이터를 보내고 싶은 에어테이블 베이스를 지정하세요.
8. 딸깍 하는 소리 토큰 생성, 복사하세요 API 키, 그리고 당신을 보장합니다 이 탭을 열어두세요!

논리 흐름에 대한 인증 구성

1. 새 탭의 Webflow 디자이너에서 사이트를 시작하세요
2. Designer 캔버스에서 양식을 선택하고 액세스합니다. 양식 설정
3. 선택하다 논리 ~로부터 원천 쓰러지 다
4. 딸깍 하는 소리 새 흐름 추가
5. 새 흐름의 이름을 지정합니다(예: "Airtable로 리드 전달"). 이름 필드를 선택하고 선택적으로 설명을 추가합니다. 설명 필드
6. 드래그 HTTP 요청하기 흐름 편집기 캔버스를 차단하고 이름을 제공합니다(예: "Airtable에서 새 리드 레코드 생성")
7. 선택된 API 토큰 ~로부터 입증 쓰러지 다
8. 선택하다 머리글 ~로부터 다음에 추가 쓰러지 다
9. "Authorization"을 입력하세요. 머리글 필드
10. 딸깍 하는 소리 자격 증명을 선택하세요 > 새 자격 증명 추가
11. API 토큰에 지정(예: "Airtable API 토큰")을 지정하세요. 이름 필드에 선택적으로 설명을 포함합니다. 설명 필드
12. “무기명”을 입력하십시오. {API 키}"에서 토큰 필드, 바꾸기 {API 키} Airtable에서 복사한 API 키를 사용하여
13. 딸깍 하는 소리 만들다 새로운 자격 증명을 보존하고 귀하를 보장하기 위해 이 탭을 열어두세요!

프로 힌트: 또한 다음을 통해 양식을 새로운 로직 흐름에 연결할 수 있는 옵션도 있습니다. 로직 패널 > 흐름 탭. Logic의 양식 제출 트리거에 대해 자세히 알아보세요.

Airtable 문서 찾기

1. 에어테이블 베이스를 다시 방문해보세요
2. 입장 돕다 그리고 선택 API 1TP32조정 추가 리소스에서
3. 레코드를 생성하려는 테이블을 선택하세요.
4. 클릭 기록 생성 — 테이블과 관련된 예제 API 요청이 오른쪽에 표시됩니다.

중대한: Airtable의 API documentation은 각 Airtable 베이스에 맞춰져 있으므로 레코드 추가를 위해 의도된 베이스에서 작업하고 있는지 확인하세요.

HTTP 요청 설정

이제 로직 흐름과 Airtable 인증 자격 증명을 구성했으므로 Webflow를 다시 방문하여 흐름 내에서 HTTP 요청을 설정하세요. 이 HTTP 요청 설정은 방문자가 사이트 양식을 제출할 때마다 Airtable 테이블에 새로운 기록을 생성합니다.

기억하다: Webflow 사이트가 열려 있던 탭을 닫은 경우 다음으로 이동하세요. 로직 패널 > 흐름 탭을 클릭하고 이전 단계에서 구성한 흐름을 선택합니다. 다음을 클릭하세요. HTTP 요청하기 흐름 편집기 캔버스에서 블록을 클릭하여 블록 설정에 액세스하고 다음 단계를 따르세요.

1. 열기 요청 방법 드롭다운하고 선택하세요. 우편
2. “https://api.airtable.com/v0”을 삽입하세요./{ID}/{테이블 이름}"에서 URL 필드, 대체 {ID} 테이블 ID와 {테이블 이름}
3. 테이블 제목을 입력하세요.
4. 누르세요 "...을 더한" 기호 옆에 헤더 새로운 헤더를 생성하려면 
5. 입력란에 "content-type"을 입력하세요. 이름 상자 및 "application/json" 값 상자
6. Airtable API documentation의 코드 블록을 몸 섹션 — 다음과 유사한 구조를 갖습니다(단, 기존 Airtable 레코드의 데이터 포함).

    { "이름": "XYZ", "성": "XYZ", "이메일": "[email protected]", "상태": "새 리드" }
    

이후에는 양식 제출의 세부정보를 캡처하기 위해 HTTP 요청에 실시간 데이터를 포함해야 합니다. 

1. 현재 Airtable 기록에서 값을 지우고 다음 항목의 빈 따옴표 사이에 커서를 놓습니다. 몸 영역
2. 보라색을 탭하세요 “점” 아이콘을 클릭하고 관련 동적 양식 필드(예: 이름, 이메일 등)를 선택합니다.

필수적인: URL 섹션의 테이블 제목에 있는 공백이나 특수 문자를 인코딩해야 합니다.

흐름을 테스트하고 실행하는 단계

1. 누르다 테스트를 실행하여 설정을 완료하세요. 
2. 해당 입력 상자에 샘플 값을 입력합니다.
3. 누르다 테스트 실행 
4. 누르다 취소 또는 데이터 적용 테스트 창을 닫으려면
5. 때리다 게시 
6. 딸깍 하는 소리 게시를 위한 단계 흐름
7. 웹사이트 게시

알림: 테스트 과정에서 오류 메시지가 나타나면 문제 해결 단계를 수행한 후 위의 작업을 반복하세요. HTTP 요청 테스트에 대해 자세히 알아보세요.

흐름 문제를 해결하는 방법

흐름을 테스트하는 동안 오류가 발생하면 다음 단계를 시도해 보세요.

• 액세스 자격 증명을 설정할 때 API 키 앞에 "Bearer"(공백 포함)를 포함했는지 확인하세요(예: "Bearer 123456789")
• 요청 URL에 테이블의 정확한 ID와 이름이 있는지 확인하세요.
• 다음과 같은 무료 도구를 사용하여 요청 본문의 문제를 검사하세요. JSONLint