SnapLead AR combines engaging Snap Camera Kit Web SDK effects with lead collection functionality. Users enter their information into a custom form to access AR filters, record their experience, and even share their videos.
- ✨ Interactive AR Effects: Access Snapchat filters directly from your web browser.
- 🎯 Lead Capture Form: Users enter details (name, email, favorite color) to access AR features.
- 🎥 Video Recording: Users can record and download a 30-second video using AR effects.
- 📤 Easy Sharing: Videos can be downloaded or shared on social platforms like Instagram, Snapchat, or WhatsApp.
SnapLeadAR
├── AUTHORS.md
├── FUNDING.yml
├── LICENSE.md
├── README.md
├── jsdoc.config.js
├── package.json
├── public
│ ├── favicon.svg
│ └── index.html
├── server
│ └── server.js
├── src
│ ├── App.css
│ ├── App.js
│ ├── components
│ │ ├── FeedbackMessages
│ │ │ ├── FeedbackMessage.css
│ │ │ └── FeedbackMessage.js
│ │ ├── LeadCaptureForm
│ │ │ ├── LeadCaptureForm.css
│ │ │ └── LeadCaptureForm.jsx
│ │ └── LoadingModal
│ │ ├── LoadingModal.css
│ │ └── LoadingModal.jsx
│ ├── context
│ │ └── AppContext.js
│ ├── i18n.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ └── SnapCamera
│ │ ├── SnapCamera.css
│ │ └── SnapCamera.jsx
│ ├── services
│ │ ├── analyticsService.js
│ │ └── apiService.js
│ ├── tests
│ │ ├── LeadCaptureForm.test.js
│ │ ├── pages
│ │ │ └── SnapCamera.test.js
│ │ └── services
│ │ ├── apiService.test.js
│ │ └── googleSheets.test.js
│ ├── types
│ │ └── index.js
│ └── utils
│ ├── errorHandling.js
│ ├── formUtils.js
│ └── googleSheets.js
├── vercel.json
└── webpack.config.js
- Fill out the form: Users enter their name, email, and favorite color.
- Access AR filters: After submitting the form, users gain access to Snapchat AR filters.
- Record videos: Capture up to 30 seconds of AR-enhanced video.
- Download and share: Download the video or share it on social media platforms.
- Clone the Repository:
git clone https://github.com/Takk8IS/SnapLeadAR.git- Install Dependencies:
cd SnapLeadAR
npm i- Set Up Environment Variables: Configure your
.envfile with:
# Server URL
SERVER_URL="http://localhost/snapleadar/"
# Server Port
PORT="8016"
# Google Sheets API
GOOGLE_SERVICE_ACCOUNT_EMAIL="[email protected]"
GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY_HERE\n-----END PRIVATE KEY-----"
# Google Spreadsheet IDs
SPREADSHEET_ID="your-google-spreadsheet-id"
# Snap Camera Kit
REACT_APP_LENS_GROUP_ID="your-lens-group-id"
REACT_APP_API_TOKEN="your-api-token"
REACT_APP_LENS_IDS="your-lens-ids-separated-by-comma"
# Vercel URL
VERCEL_URL="https://your-vercel-url.vercel.app"
- Build the Application:
npm run build- Run the Application:
npm run dev- Deploy on Vercel:
First, ensure you have the Vercel CLI installed globally:
sudo npm i -g vercelThen, initialize the deployment process:
vercelFinally, deploy to production:
vercel --prodSnapLead AR Snap Camera Kit Web SDK respects user privacy, ensuring data is used solely for intended lead capture purposes and stored securely.
Contributions are welcome! Feel free to open issues or submit pull requests.
- Fork the repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
If this project has been helpful, consider making a donation:
USDT (TRC-20): TGpiWetnYK2VQpxNGPR27D9vfM6Mei5vNA
Your support helps us continue to develop innovative tools.
This project is licensed under the CC-BY-4.0 Licence. See the LICENSE file for more details.
Leading the Digital Revolution as the Pioneering 100% Artificial Intelligence Team.
- Author: David C Cavalcante
- Author Co-Name: Fjallstoppur
- LinkedIn: linkedin.com/in/hellodav
- Email: Takk™ Innovate Studio
- X: @Takk8IS
- Medium: takk8is.medium.com
- Website: takk.ag