diff --git a/README.md b/README.md deleted file mode 100644 index e49d643a..00000000 --- a/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# webSDK-sample -Sample WebSDK integration - -[Basic Integration](index.html) - -[Integration with Debugging enabled](debug.html) - -[Self Handled Opt-in Sample](self-handled-push.html) - -[Custom Service Worker](custom-serviceworker.html) - -[Web Personalization](web-personalization.html) - -[Angular App Sample Code](angular-sample/) - -[React App Sample Code](react-sample/) - -[Nuxt JS SPA](nuxt-spa/) - -[Next JS](nextjs/) - -[Google Tag Manager](google-tag-manager/) - -[LG Web OS](lg-web-os/) - -[Samsung Tizen OS](samsung-tizen-os/samsungTizenOs/) - -[PWA](pwa/) - -[npm](npm/) - -[Chrome Extension](chrome-extension/) - -[Magento](magento/) diff --git a/chatgpt-app-sample/.eslintrc.json b/chatgpt-app-sample/.eslintrc.json new file mode 100644 index 00000000..f18272b8 --- /dev/null +++ b/chatgpt-app-sample/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": "next/core-web-vitals" +} + diff --git a/chatgpt-app-sample/.gitignore b/chatgpt-app-sample/.gitignore new file mode 100644 index 00000000..bbf87739 --- /dev/null +++ b/chatgpt-app-sample/.gitignore @@ -0,0 +1,30 @@ +# Dependencies +node_modules/ + +# Next.js +.next/ +out/ +.vercel + +# Environment variables +.env*.local +.env + +# Debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# OS +.DS_Store +Thumbs.db + +# IDE +.vscode/ +.idea/ +*.swp +*.swo + +# Build +dist/ +build/ diff --git a/chatgpt-app-sample/CHATGPT_DIRECT_USE.md b/chatgpt-app-sample/CHATGPT_DIRECT_USE.md new file mode 100644 index 00000000..11056cfc --- /dev/null +++ b/chatgpt-app-sample/CHATGPT_DIRECT_USE.md @@ -0,0 +1,342 @@ +# 🚀 Use Your App Directly in ChatGPT - Step by Step + +This guide will help you deploy and use your hotel booking app directly in ChatGPT in just a few minutes. + +--- + +## Step 1: Deploy to Vercel (5 minutes) + +### Option A: Deploy from GitHub (Easiest) + +1. **Go to Vercel Dashboard**: + - Visit: https://vercel.com/new + - Click **"Import Git Repository"** + +2. **Select Your Repository**: + - Find: `moengage/webSDK-sample` + - Branch: `feat/chatgpt-app-integration` + - Click **"Import"** + +3. **Configure Project**: + - Framework: **Next.js** (auto-detected) + - Root Directory: **`chatgpt-app-sample`** ⚠️ **IMPORTANT** + - Build Command: `npm run build` (default) + - Output Directory: `.next` (default) + +4. **Add Environment Variables**: + Click **"Environment Variables"** and add: + + **Variable 1:** + - Name: `NEXT_PUBLIC_MOENGAGE_DATACENTER` + - Value: `dc_01` + - Click **"Add"** + + **Variable 2:** + - Name: `NEXT_PUBLIC_MOENGAGE_APP_ID` + - Value: `3RADPYNEBZ2MCOJ43EEW5FWV` + - Click **"Add"** + +5. **Deploy**: + - Click **"Deploy"** button + - Wait 2-3 minutes for deployment + - **Copy your deployment URL** (e.g., `https://websdk-sample-xyz.vercel.app`) + +### Option B: Deploy via CLI + +```bash +cd /Users/aman.verma/Desktop/Projects/OPEN_AI_SDK/chatgpt-app-sample + +# Login to Vercel +vercel login + +# Deploy +vercel + +# When prompted: +# - Link to existing? → N +# - Project name → Press Enter +# - Directory → Type: chatgpt-app-sample +# - Override? → N +``` + +Then add environment variables in Vercel dashboard. + +--- + +## Step 2: Update Configuration Files + +After deployment, you need to update the config files with your **actual Vercel URL**. + +### 2.1 Update `public/ai-plugin.json` + +Replace `https://your-app.vercel.app` with your actual URL: + +```json +{ + "api": { + "url": "https://YOUR-ACTUAL-URL.vercel.app/.well-known/openapi.yaml" + }, + "logo_url": "https://YOUR-ACTUAL-URL.vercel.app/logo.png", + "legal_info_url": "https://YOUR-ACTUAL-URL.vercel.app/legal" +} +``` + +### 2.2 Update `public/.well-known/openapi.yaml` + +Replace `https://your-app.vercel.app` with your actual URL: + +```yaml +servers: + - url: https://YOUR-ACTUAL-URL.vercel.app +``` + +### 2.3 Commit and Push + +```bash +cd /Users/aman.verma/Desktop/Projects/OPEN_AI_SDK/chatgpt-app-sample + +git add public/ai-plugin.json public/.well-known/openapi.yaml +git commit -m "Update deployment URLs" +git push origin feat/chatgpt-app-integration +``` + +Vercel will automatically redeploy! + +--- + +## Step 3: Create ChatGPT GPT (2 minutes) + +1. **Go to OpenAI Platform**: + - Visit: https://platform.openai.com/ + - Make sure you're logged in with **ChatGPT Plus** account + +2. **Create New GPT**: + - Click **"GPTs"** in left sidebar + - Click **"Create"** or **"+"** button + +3. **Configure Your GPT**: + + **In the "Configure" tab:** + + - **Name**: `Hotel Booking Assistant` + - **Description**: `Search and book hotels with real-time availability` + - **Instructions**: + ``` + You are a helpful hotel booking assistant. When users ask about hotels, + help them search for available hotels by destination, dates, and number of guests. + Use the hotel booking widget to show them options and help them complete bookings. + ``` + +4. **Add Widget** (This is the key step!): + + - Scroll down to find **"Widget"** section (or look for "Additional Settings") + - **Widget URL**: Enter your Vercel URL + ``` + https://YOUR-ACTUAL-URL.vercel.app + ``` + + - **Widget CSP** (Content Security Policy) - Click to expand and add: + ```json + { + "openai/widgetCSP": { + "connect_domains": [ + "https://*.moengage.com", + "https://api.moengage.com" + ], + "resource_domains": [ + "https://js.moengage.com", + "https://cdn.moengage.com", + "https://sdk-0X-moengage.com" + ] + } + } + ``` + +5. **Save Your GPT**: + - Click **"Save"** button (top right) + - Choose visibility: + - **"Only me"** - For testing + - **"Anyone with a link"** - To share with others + - **"Public"** - Make it public + - Click **"Confirm"** + +--- + +## Step 4: Use in ChatGPT (1 minute) + +1. **Open ChatGPT**: + - Go to: https://chat.openai.com + - Make sure you're logged in + +2. **Access Your GPT**: + - Click on your **profile/name** (top right corner) + - Click **"My GPTs"** + - Find and click **"Hotel Booking Assistant"** + +3. **Start Using It!** + + Try these commands: + + ``` + "I want to book a hotel in Paris for next week" + ``` + + ``` + "Find hotels in New York from December 20 to December 25 for 2 guests" + ``` + + ``` + "Show me hotels in Tokyo" + ``` + +4. **The Widget Will Appear!** + - Your hotel booking app will load inside ChatGPT + - You can search, view hotels, and complete bookings + - All actions are tracked in MoEngage! + +--- + +## Step 5: Verify Everything Works + +### Check Widget Loading: +1. Open **Browser DevTools** (Press `F12`) +2. Go to **"Console"** tab +3. Look for any errors (should be none) +4. Check **"Network"** tab → Filter `moengage` +5. You should see SDK loading requests + +### Check MoEngage Tracking: +1. Perform actions in the app: + - Search for hotels + - View hotel details + - Start booking + - Complete booking + +2. Check MoEngage Dashboard: + - Go to: https://app.moengage.com/ + - Login to your account + - Go to **"Analytics"** → **"Events"** + - Look for events: + - `app_loaded` + - `hotel_search` + - `hotel_viewed` + - `booking_started` + - `booking_completed` + - `gpt_app_session_start` ✅ (This confirms it's running in ChatGPT!) + +3. Check User Attributes: + - Go to **"Users"** section + - Look for: + - `gpt_app_user: true` ✅ + - `ai_platform: "chatgpt"` ✅ + - `is_gpt_app: true` ✅ + +--- + +## 🎯 Quick Reference + +### Your Deployment URL Format: +``` +https://websdk-sample-[random].vercel.app +``` + +### Widget URL in ChatGPT: +``` +https://YOUR-VERCEL-URL.vercel.app +``` + +### Environment Variables: +``` +NEXT_PUBLIC_MOENGAGE_DATACENTER=dc_01 +NEXT_PUBLIC_MOENGAGE_APP_ID=3RADPYNEBZ2MCOJ43EEW5FWV +``` + +--- + +## 🐛 Troubleshooting + +### Widget Not Showing? + +1. **Check Widget URL**: + - Make sure it's exactly: `https://YOUR-URL.vercel.app` + - No trailing slash + - Must be HTTPS + +2. **Check Browser Console**: + - Press `F12` → Console tab + - Look for errors + - Common issues: + - CSP errors → Check Widget CSP settings + - CORS errors → Already handled in code + - 404 errors → Check URL is correct + +3. **Check Vercel Deployment**: + - Go to Vercel dashboard + - Check deployment status (should be "Ready") + - Check build logs for errors + +### MoEngage Not Tracking? + +1. **Check SDK Loading**: + - DevTools → Network tab + - Filter: `moengage` + - Look for `sdk.js` file loading + - Should see 200 status + +2. **Check Environment Variables**: + - Vercel Dashboard → Settings → Environment Variables + - Make sure both are set correctly + - Redeploy after adding + +3. **Check App ID**: + - Verify `NEXT_PUBLIC_MOENGAGE_APP_ID` is correct + - Check MoEngage dashboard for correct App ID + +### Events Not Appearing? + +1. **Wait 1-2 minutes** - Events may be delayed +2. **Check Dashboard Filters** - Make sure no date filters +3. **Check Correct App** - Verify you're looking at right MoEngage app +4. **Check Debug Logs** - Enable in `.env.local`: + ``` + NEXT_PUBLIC_MOENGAGE_DEBUG_LOGS=1 + ``` + +--- + +## ✅ Success Checklist + +- [ ] App deployed to Vercel +- [ ] Environment variables added +- [ ] Config files updated with Vercel URL +- [ ] ChatGPT GPT created +- [ ] Widget URL added +- [ ] Widget CSP configured +- [ ] GPT saved +- [ ] Widget appears in ChatGPT +- [ ] MoEngage SDK loads +- [ ] Events tracking in dashboard +- [ ] User attributes set correctly + +--- + +## 🎉 You're Done! + +Once you complete these steps, your hotel booking app will work directly in ChatGPT! + +**Test it now:** +1. Open ChatGPT +2. Go to "My GPTs" +3. Select "Hotel Booking Assistant" +4. Try: `"I want to book a hotel in Paris"` + +The widget will appear and you can start booking hotels! 🚀 + +--- + +## 📞 Need Help? + +- **Vercel Issues**: https://vercel.com/docs +- **ChatGPT GPTs**: https://platform.openai.com/docs/guides/gpts +- **MoEngage Docs**: https://docs.moengage.com/ + diff --git a/chatgpt-app-sample/CHATGPT_TESTING_GUIDE.md b/chatgpt-app-sample/CHATGPT_TESTING_GUIDE.md new file mode 100644 index 00000000..5a3fc83e --- /dev/null +++ b/chatgpt-app-sample/CHATGPT_TESTING_GUIDE.md @@ -0,0 +1,431 @@ +# Complete Guide: Testing Your Booking.com App in ChatGPT + +This guide will walk you through every step to test your MoEngage-integrated hotel booking app inside ChatGPT. + +## Prerequisites + +1. **OpenAI Account**: You need a ChatGPT Plus subscription (required for GPT apps) +2. **Deployed App**: Your app must be deployed and accessible via HTTPS +3. **MoEngage Account**: Access to MoEngage dashboard to verify events + +--- + +## Step 1: Deploy Your App + +### Option A: Deploy to Vercel (Recommended) + +1. **Install Vercel CLI** (if not already installed): + ```bash + npm install -g vercel + ``` + +2. **Deploy from your project directory**: + ```bash + cd /Users/aman.verma/Desktop/Projects/OPEN_AI_SDK/chatgpt-app-sample + vercel + ``` + +3. **Follow the prompts**: + - Link to existing project or create new + - Confirm project settings + - Wait for deployment to complete + +4. **Note your deployment URL**: You'll get a URL like `https://your-app.vercel.app` + +### Option B: Deploy to Other Platforms + +- **Netlify**: `npm run build` then drag `out` folder to Netlify +- **Railway**: Connect GitHub repo and deploy +- **Any HTTPS hosting**: Ensure your app is accessible via HTTPS + +--- + +## Step 2: Configure Environment Variables + +1. **Create `.env.local` file** (if not exists): + ```bash + NEXT_PUBLIC_MOENGAGE_DATACENTER=dc_01 + NEXT_PUBLIC_MOENGAGE_APP_ID=3RADPYNEBZ2MCOJ43EEW5FWV + ``` + +2. **Redeploy** after adding environment variables: + ```bash + vercel --prod + ``` + +--- + +## Step 3: Create ChatGPT App Configuration + +### 3.1 Create `ai-plugin.json` File + +Create a file named `ai-plugin.json` in your `public` folder: + +```json +{ + "schema_version": "v1", + "name_for_human": "Hotel Booking", + "name_for_model": "hotel_booking", + "description_for_human": "Search and book hotels with real-time availability and pricing.", + "description_for_model": "A hotel booking service that allows users to search for hotels by destination, check-in/check-out dates, and number of guests. Users can view hotel details, compare prices, and complete bookings.", + "auth": { + "type": "none" + }, + "api": { + "type": "openapi", + "url": "https://your-app.vercel.app/.well-known/openapi.yaml" + }, + "logo_url": "https://your-app.vercel.app/logo.png", + "contact_email": "support@example.com", + "legal_info_url": "https://your-app.vercel.app/legal" +} +``` + +### 3.2 Create OpenAPI Specification + +Create `public/.well-known/openapi.yaml`: + +```yaml +openapi: 3.0.0 +info: + title: Hotel Booking API + version: 1.0.0 + description: API for searching and booking hotels +servers: + - url: https://your-app.vercel.app +paths: + /: + get: + summary: Hotel booking interface + description: Main interface for hotel search and booking + responses: + '200': + description: HTML page with hotel booking interface +``` + +### 3.3 Update Next.js Config for ChatGPT Apps + +Update `next.config.js`: + +```javascript +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + swcMinify: true, + async headers() { + return [ + { + source: '/.well-known/:path*', + headers: [ + { + key: 'Access-Control-Allow-Origin', + value: '*', + }, + { + key: 'Content-Type', + value: 'application/json', + }, + ], + }, + { + source: '/:path*', + headers: [ + { + key: 'X-Frame-Options', + value: 'ALLOWALL', + }, + { + key: 'Content-Security-Policy', + value: "frame-ancestors 'self' https://chat.openai.com https://chatgpt.com;", + }, + ], + }, + ]; + }, +}; + +module.exports = nextConfig; +``` + +--- + +## Step 4: Configure Content Security Policy for MoEngage + +### 4.1 Update `app/layout.tsx` + +Add CSP meta tag to allow MoEngage SDK: + +```tsx +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + +