Getting Started with Embeddy

1Creating an Account

To get started with Embeddy, you need to create a free account. Embeddy offers a generous free tier so you can explore the platform and build your first widget without any commitment.

1. Navigate to embeddy.ai/auth in your browser.
2. Sign up using your email address or use Google sign-in for faster access.
3. Verify your email address if prompted -- check your inbox for the confirmation link.
4. Once verified, you will be automatically redirected to your dashboard.

2Understanding the Dashboard

The Embeddy dashboard is your command center for creating, managing, and deploying widgets. Here is what you will find:

• My Widgets: A list of all the widgets you have created. Each widget shows its name, status, creation date, and quick actions for editing or embedding.
• Explore: Browse widgets created by the community for inspiration. You can fork and customize any public widget to make it your own.
• Create New: The main action button that takes you to the vibe coding interface where you describe what you want to build.
• Account Settings: Manage your profile, billing, plan, and credit usage from the account section.

3Creating Your First Widget with Vibe Coding

Vibe coding is Embeddy's approach to software creation: you describe what you want in plain English, and the AI builds a complete, fullstack application for you. No programming knowledge, no syntax to learn, no frameworks to configure. Just describe your idea.

How to create a widget:

1. Click the "Create New" button on your dashboard.
2. You will see a text input field. Type a description of the application you want to build.
3. Be as specific or as general as you like -- Embeddy's AI understands context and intent.
4. Press Enter or click "Generate" to start the build process.
5. Wait while the AI generates your fullstack application. This typically takes 30-90 seconds.
6. Your widget will appear in the preview panel, fully functional and ready to test.

Example prompts to try:

Unlike simple form builders or static page generators, Embeddy creates complete applications with their own databases, API endpoints, and interactive user interfaces. A booking system prompt, for instance, generates a working appointment scheduler with real data persistence, not just a static mockup.

4Understanding Credits and Plans

Embeddy uses a credit-based system. Each AI generation or iteration uses credits from your account balance. Here is how the plans break down:

Widget types refer to distinct applications you create (e.g., a calorie tracker and a booking system are two widget types). Instances are individual deployments of a widget type -- for example, embedding the same booking system on three different client websites counts as three instances. Visit the pricing page for complete plan details and annual discount pricing.

5Customizing Your Widget with Natural Language

Once your widget is generated, you can iterate on it using the same natural language interface. Think of it like chatting with a developer who instantly implements your feedback. Each iteration uses one credit.

Iteration examples:

You can make as many iterations as your credits allow. Each refinement builds on the previous version, so the AI retains context about your application's current state and features. This means you can progressively add complexity -- start simple and layer on features over multiple iterations.

6Previewing and Testing

Every widget has a live preview that you can interact with directly in the Embeddy editor. The preview shows exactly how your widget will look and behave when embedded on a real website.

• Live preview panel: See your widget rendered in real time on the right side of the editor. Click, type, and interact with it just like an end user would.
• Responsive testing: Resize the preview panel to see how your widget adapts to different screen sizes -- desktop, tablet, and mobile.
• Demo link: Each widget gets a shareable demo URL at embeddy.ai/demo/your-widget-id that you can open in any browser or share with others for feedback before deploying.
• Data testing: Since Embeddy creates real fullstack applications with databases, any data you enter during testing is real and persists. You can clear test data from the storage tab before going live.

7Getting Your Embed Code

Once you are satisfied with your widget, it is time to get the embed code. Embeddy provides a simple HTML snippet that works on virtually any platform that supports custom HTML or iframes.

1. Open your widget from the dashboard.
2. Click the "Embed" or "Share" button in the top toolbar.
3. Copy the embed code snippet provided.

Standard iframe embed code:

<iframe
  src="https://embeddy.ai/demo/YOUR_WIDGET_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  allow="clipboard-write; payment"
  loading="lazy"
  title="My Embeddy Widget"
></iframe>

Replace YOUR_WIDGET_ID with your actual widget ID, which is displayed on the embed panel. You can adjust the width and height values to fit your target container. For a deeper dive into embed options and the JavaScript SDK, see the API Reference.

8Deploying to Your First Platform

Here is a quick-start guide for deploying on some of the most popular platforms. For detailed, platform-specific instructions, see the Embedding Guide.

9Next Steps

Congratulations -- you have created and deployed your first Embeddy widget! Here is where to go from here: