Bubble.io를 Wix와 통합하여 동적 웹사이트와 앱을 쉽게 생성하는 방법에 대한 단계별 가이드를 발견하세요.
Wix는 사용자가 자신의 웹사이트와 모바일 애플리케이션을 생성하고 관리할 수 있게 하는 온라인 플랫폼입니다. 드래그 앤 드롭 인터페이스를 사용하여 사용자는 코드를 작성할 필요 없이 다양한 템플릿, 디자인 기능, 대화형 요소로 사이트를 커스터마이즈 할 수 있습니다. Wix는 또한 호스팅, 도메인 등록, SEO 도구, 전자 상거래 기능, 이메일 마케팅, 소셜 미디어 통합을 제공합니다. 이는 개인의 요구와 예산에 맞게 조정 가능한 다양한 가격 계획, 무료 옵션을 포함하여 제공합니다.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
단계 1: Bubble.io에 계정 등록하기
우선, https://bubble.io/에 방문하여 오른쪽 상단에 있는 'Sign Up' 버튼을 클릭하고 필요한 정보를 입력하여 Bubble.io 계정을 등록해야 합니다. 만약 이미 계정이 있다면 이 단계를 건너뛰어도 됩니다.
단계 2: Bubble.io 앱 생성하기
Bubble.io 대시보드에서 'New app' 버튼을 클릭하고, 애플리케이션의 이름, 개인정보 보호 설정 및 언어를 설정한 다음 'Create a new app'을 클릭합니다.
단계 3: Bubble.io에서 필요한 기능 구현
Bubble.io 앱에는 인증 시스템, 동적 데이터 조회 및 업데이트 시스템 등의 기능이 포함될 수 있습니다. Bubble.io의 시각적 프로그래밍을 이용하여 필요한 워크플로우와 데이터 구조를 생성하세요. Bubble.io 내에서 앱을 테스트하여 기능을 확인합니다.
단계 4: Bubble.io 디자인
Bubble.io 내 앱의 'Design' 탭에 가서 요소를 페이지에 드래그 앤 드롭합니다. Wix 사이트와 일치하는 스타일과 디자인으로 이를 커스터마이징 할 수 있습니다.
단계 5: iFrame 생성
Bubble.io의 'Design' 탭으로 전환합니다. Wix 웹사이트에 추가하고자 하는 Bubble.io 앱에 iFrame을 추가합니다. 이를 통해 나중에 앱을 Wix 사이트에 임베드 할 수 있습니다.
단계 6: Bubble.io에서 앱 게시
앱이 준비되면 Bubble.io에서 'Deploy' 버튼을 클릭하여 애플리케이션을 배포할 수 있습니다.
단계 7: Bubble 앱의 URL 받기
앱을 배포하면 앱에 대한 URL을 받게 됩니다. 이 URL을 복사하십시오. 이것이 Bubble.io 앱을 Wix 사이트와 통합하는데 필요합니다.
단계 8: Wix 계정에 등록/로그인
Wix 계정이 없다면 하나 만드세요. 이미 있다면 로그인하고 Bubble.io 앱을 표시하려는 페이지의 Wix 편집 창으로 이동하세요.
단계 9: HTML iFrame/Embed 컴포넌트 추가
Wix 편집기에서 '플러스' 버튼을 클릭하고, 'Embed'에 마우스를 올려놓고, 'HTML iFrame'을 클릭하세요. 이렇게 하면 Bubble.io 앱을 불러 올 수 있는 HTML iFrame이 사이트에 추가됩니다.
단계 10: Bubble.io URL을 iFrame 코드에 붙여넣기
Wix 페이지에서 'HTML iFrame'을 클릭하고, 'Enter Code'를 클릭합니다. 이 후 나오는 'Website Address (URL)' 상자에 복사한 Bubble.io 앱의 URL을 붙여넣습니다.
단계 11: iFrame 크기 조정
Bubble.io 앱을 제대로 표시하기 위해 필요에 따라 iFrame의 크기를 조정합니다.
단계 12: Wix에서 변경 사항 저장 및 게시
Bubble.io 앱을 Wix 페이지에 임베드하고 크기를 조정한 후, 변경 사항을 저장하고 게시합니다. 이제 정상적으로 작동하는 Bubble.io 앱을 Wix 사이트에서 확인하실 수 있습니다.
게시한 변경 사항을 검토하고, Wix 사이트를 테스트하여 Bubble.io 응용 프로그램이 페이지 내에서 올바르게 작동하는지 확인하세요.
시나리오: 인테리어 디자인 회사가 새로운 홈 데코레이션 컬렉션에 대한 고객 참여 과정을 개선하고자 합니다. 그들은 Bubble.io를 사용하여 상호작용하는 제품 카탈로그를 구축하며, 잠재적인 고객들이 컬렉션을 탐색하고, 견적을 요청하고, 상담을 설정할 수 있습니다. 그들은 이러한 고객 상호작용을 Wix에 자동으로 녹화하여 추가적인 의사소통 및 추적을 목표로 합니다.
솔루션: Bubble.io와 Wix 통합
제품 카탈로그 생성: 회사는 Bubble.io를 사용하여 견적 요청, 선호도 표시, 상담 일정 설정 기능을 통합한 매력적인 제품 카탈로그를 구축합니다.
통합 설정: 회사는 Bubble.io에 Wix 플러그인을 설치하고 Wix API 키를 사용하여 연결을 설정합니다. 그들은 제품 카탈로그에서 특정 동작이 수행될 때 시작하는 Bubble.io에서 워크플로우를 구성합니다.
상호작용 데이터 동기화 워크플로우: 클라이언트가 견적 요청 또는 상담 스케줄링과 같은 동작을 수행하면 이 워크플로우가 활성화됩니다. 입력된 데이터(이름, 이메일, 제품 관심, 상담 시간 등)는 동기화된 Wix 플러그인 동작을 사용하여 즉시 Wix로 전송됩니다. 제공된 세부 정보를 포함해 새로운 고객 프로파일이 Wix에 구성되며, 추적을 효율적으로 하기 위해 특정 제품 또는 서비스 카테고리를 태깅합니다.
Wix에서의 클라이언트 참여: 회사의 영업팀은 기록된 고객 데이터를 활용하여 자동화된 이메일 응답, 워크플로우, 그리고 작업을 Wix에서 설정합니다. 그들은 제품 관심사와 응답성에 따라 고객을 분류하고, 이후 상호작용을 개인화하여 전환이 가능성을 높일 수 있습니다.
모니터링 및 분석: 통합을 통해 Wix에서 고객 활동 및 참여 추적이 용이해집니다. 회사는 상호작용하는 제품 카탈로그 및 고객 참여 전략의 성과를 평가하고, 참여 접근 방식을 미세 조정하기 위해 근거 있는 수정을 할 수 있습니다.
장점:
효율성: 고객 상호작용 녹화 과정을 자동화하면 시간을 절약하고 수동 오류 위험을 줄일 수 있습니다.
중앙집중화된 데이터: 모든 고객 데이터는 Wix에서 보유 및 관리되며, 영업팀에게 단일하고 신뢰할 수 있는 데이터 소스를 제공합니다.
개인화된 상호작용: 통합은 특이한 제품 관심사와 고객의 반응에 따른 맞춤형 고객 상호작용 캠페인을 쉽게 설정할 수 있게합니다.
통찰력있는 데이터: 회사는 Wix에서 자신들의 참여 전략의 효과성을 조사하고, 고객 상호작용 및 전환율에 대한 통찰력을 얻을 수 있습니다.
Bubble.io를 Wix에 통합함으로써, 인테리어 디자인 회사는 제품 카탈로그에서 고객 상호작용을 능숙하게 처리하고, 신속하고 맞춤형 대응을 보장하며, 결국 향상된 결과를 가져올 수 있습니다.
.svg)
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
.svg)
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
.svg)
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.
Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.
.png)
.png)
