우리의 포괄적인 단계별 가이드를 사용하여 Bubble.io를 Weebly와 무리 없이 통합하는 방법을 배우세요. 오늘 당신의 사이트 기능을 향상시키세요!
Weebly는 온라인 쇼핑 사이트를 위해 특별히 설계된 웹 호스팅 서비스입니다. 이 플랫폼은 사용자가 포인트 앤 클릭 인터페이스를 통해 잘 디자인된 웹사이트를 제작할 수 있게 해줍니다. Weebly는 쇼핑 카트, 다양한 결제 게이트웨이 옵션, SEO 도구, 그리고 온라인 비즈니스를 위한 포괄적인 추적 및 관리 기능과 같은 기능을 제공하며 사용자 정의 가능한 디자인 템플릿도 제공합니다. 사용자 친화적인 인터페이스와 효율적인 웹사이트 구축 도구 때문에 Weebly는 창업가들 사이에서 인기 있는 선택입니다.
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와 Weebly를 통합하는 과정을 시작하기 전에 통합이 무엇을 하는지 이해하는 것이 유익할 것입니다. Bubble.io는 사람들이 소프트웨어 솔루션을 설계, 개발, 론칭할 수 있게 해주는 노코드 플랫폼이고, Weebly는 웹사이트 빌더입니다. 따라서 이 두 개를 통합하면 코드를 작성하지 않고도 고급 Weebly 사이트를 구축할 수 있게됩니다.
단계 2: Bubble.io 계정 열기
아직 Bubble.io 계정이 없다면, Bubble.io를 방문하여 먼저 새로운 계정을 등록하세요. 보통 구글 또는 페이스북 계정을 사용하여 가입할 수 있습니다.
단계 3: Bubble.io에서 새로운 애플리케이션 생성하기
Bubble.io 계정에 로그인 한 후, 'New App' 버튼을 클릭하여 새로운 애플리케이션을 생성하십시오. 원하는 애플리케이션의 이름을 입력하고, 사용하고자하는 계획을 선택하십시오 (시작단계에서는 무료 계획을 사용할 수 있습니다), 앱이 비어있어야 하는지 또는 디자인 템플릿을 포함해야 하는지 선택하십시오.
단계 4: Bubble.io 어플리케이션 만들기
Weebly 웹사이트에 추가하려는 기능을 추가하십시오. 이러한 작업을 위해 Bubble.io 툴박스에서 요소를 앱 페이지로 드래그 앤 드롭해야 합니다. 예를 들어, 대화식 지도, 사용자 가입 및 로그인, 사용자 데이터를 저장하고 검색하는 데이터베이스 등을 추가할 수 있습니다.
단계 5: Bubble.io의 API 설정
Bubble.io에는 강력하면서도 사용하기 쉬운 API 기능이 있습니다. "Data" 옵션을 클릭한 다음 “API” 탭을 클릭하십시오. API를 통해 노출되어야 하거나 노출되지 않아야 하는 것에 대한 권한을 설정하십시오.
단계 6: Weebly 계정 열기
Weebly 웹사이트로 이동하여 계정에 로그인하십시오.
단계 7: Weebly 사이트 편집기 액세스하기
수정하려는 Weebly 사이트로 이동하면 'Edit Site' 버튼이 표시됩니다. 사이트 편집기로 이동하려면 이를 클릭하십시오.
단계 8: Weebly 사이트에 Bubble.io 요소 추가하기
Weebly 사이트 편집기에서, Bubble.io 어플리케이션이 나타나기 원하는 페이지에 "Embed Code" 상자를 드래그하십시오. 상자 안의 'Click to set custom HTML' 영역을 클릭한 다음 팝업에서 'Edit custom HTML'을 선택하십시오.
단계 9: Bubble.io 어플리케이션에 연결하기
이 HTML 영역에 iframe 요소를 임베드하려고 합니다. 이 iframe의 src 속성 내부에 Bubble.io 어플리케이션의 URL을 붙여넣으십시오. HTML은 최종적으로 다음과 같이 보일 것입니다:
.png)
.png)
<iframe width="100%" height="500" src="https://my-app.bubbleapps.io/" frameborder="0" allowfullscreen></iframe>
Bubble.io 애플리케이션의 URL로 'https://my-app.bubbleapps.io/'를 교체하십시오.
단계 10: Weebly 사이트 게시하기
이 모든 단계를 따른 후에 마지막으로 해야 할 일은 업데이트된 Weebly 사이트를 게시하는 것입니다. Weebly 설정에 따라, 이 작업은 자동으로 이루어지거나 'Publish'버튼을 눌러야 할 수도 있습니다.
이후에, Weebly에서 로그아웃 하고 Bubble.io 어플리케이션을 임베드한 페이지를 방문하십시오. 모든 것을 정확하게 수행했다면, Bubble.io 어플리케이션이 이제 Weebly 사이트의 일부로 작동해야 합니다. 축하합니다, 방금 Bubble.io와 Weebly를 통합하였습니다!
시나리오: 부동산 중개사무소는 Weebly를 사용하여 자신들의 부동산을 선보이는 웹 사이트를 만들고 관리했습니다. 그들은 판매자가 자신의 부동산 정보를 입력할 수 있는 맞춤형 부동산 목록 폼을 만들고자 합니다.
해결책: Weebly와 Bubble.io를 통합하기
부동산 목록 폼 생성: 중개사무소는 Bubble.io를 사용하여 동적인 부동산 목록 폼을 만들기로 결정했습니다. 이 폼을 통해 판매자는 위치, 가격, 면적, 사진 등 부동산에 대한 중요한 정보를 입력할 수 있습니다.
통합 설정: 중개사무소는 Bubble.io 플러그인을 Weebly 사이트에 통합합니다. 그런 다음, 그들은 이를 구성하고 Weebly 사이트에서 폼이 제출되면 활성화되는 Bubble.io의 워크플로우를 설정합니다.
데이터 전송 워크플로우: 판매자가 폼에 부동산 정보를 입력하면 워크플로우가 활성화됩니다. 제출된 데이터는 구성된 Bubble.io 플러그인 동작을 사용하여 부동산 중개 사무소의 내부 시스템으로 전송됩니다.
새로운 부동산 목록 생성: 중개사무소의 데이터베이스 내부에는 폼에 제공된 모든 정보와 함께 새로운 목록이 생성됩니다.
부동산 목록 관리: 중개사무소는 이제 자신들의 데이터베이스에서 부동산 목록을 쉽게 검색하고, 필터링하고, 관리할 수 있습니다. 또한, 이들은 이러한 목록을 Weebly 웹사이트에 업로드하여 희망 구매자들이 볼 수 있게 할 수 있습니다.
분석 및 추적: 이 통합을 통해, 중개사무소는 부동산 제출을 추적하고, 제출 추세를 파악하며, 시장 공급에 대한 명확한 그림을 그릴 수 있습니다.
장점:
자동화된 목록 프로세스: 부동산 목록의 자동화는 프로세스를 간소화하며, 오류 위험을 줄이고 시간을 절약합니다.
조직화된 데이터: 모든 부동산 목록은 일관되게 저장되며 데이터베이스에서 쉽게 관리될 수 있습니다.
쉬운 접근성: 가지고 있는 목록을 Weebly 웹사이트에 업로드함으로써, 잠재적 구매자들이 속성을 더 쉽고 편리하게 찾아볼 수 있게 됩니다.
결론적으로, Bubble.io를 Weebly와 통합함으로써, 부동산 중개사무소는 부동산 목록 프로세스를 자동화하고 간소화하고, 잠재 구매자들에게 사용하기 쉬운 플랫폼을 제공하며, 시장 추세에 대한 중요한 통찰력을 얻을 수 있습니다.
.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.
