# Introduction to Beefree

<figure><img src="https://806400411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8c7XIQHfAtM23Dp3ozIC%2Fuploads%2FgdvCLyiQVTEtyBhXTRzg%2Fhero-sdk.png?alt=media&#x26;token=7574f502-7229-4da1-ad33-25a54c531311" alt=""><figcaption></figcaption></figure>

## What is Beefree SDK?

Beefree SDK is an embeddable no-code builder that gives your end users the freedom to design stunning emails, landing pages, and popups—without writing a single line of code. It’s easy to configure, intuitive to personalize, and built to scale with your needs—whether you're a startup or an enterprise. Built with both developers and end users in mind, it’s designed to integrate easily into your application, scale as your product grows, and provide a flexible, white-label design experience.

**For developers**, Beefree SDK is easy to work with. You can personalize the design experience by adding simple configuration parameters. Want to enable or disable a feature? Just check a box in the Developer Console, hit save, and the changes are immediately reflected on the frontend. No complicated setup required.

**For your end users,** Beefree SDK is an intuitive drag-and-drop editor with everything end users need to bring their creative ideas to life—whether they’re creating an email campaign, a landing page, or an attention-grabbing popup. Content blocks like titles, images, lists, tables, buttons, and more are all available right out of the box.

Beefree SDK includes the following features and more:

* **Email builder:** A [no-code email](https://docs.beefree.io/beefree-sdk/visual-builders/email-builder) creation environment that helps end users quickly create beautiful emails. This environment supports your end users in following email creation best practices recommended by industry experts.
* **Page builder:** A [no-code landing page](https://docs.beefree.io/beefree-sdk/visual-builders/page-builder) creation environment that empowers end users to build visually stunning landing pages. They can use a landing page as a link for a call-to-action (CTA) inside emails, to embed forms and capture information, or to create standalone pages.
* **Popup builder:** The [popup builder is a no-code environment](https://docs.beefree.io/beefree-sdk/visual-builders/popup-builder) that provides end users with the tools they need to build compelling popups that capture attention.
* **AI-generated templates:** With both[ Simple Schema](https://docs.beefree.io/beefree-sdk/data-structures/simple-schema) and the [Convert endpoints](https://docs.beefree.io/beefree-sdk/apis/content-services-api/convert#simple-to-full-json), you can build a custom AI-generated content creation experience (for assets such as emails, landing pages, or popups) for your end users.
* **AI Writing Assistant:** A helpful AI assistant to help end users write their design content.
* **File manager:** A tool to [manage media assets](https://github.com/BeefreeSDK/beefree-sdk-docs/blob/main/broken-reference/README.md) (images, PDFs, and so on).
* **Template catalog:** A design template catalog that integrates industry best practices to support end users in quickly getting across the finish line with their creations and achieving quick design wins.
* **API offering:** Extend the functionality of any of the builders with our comprehensive [suite of APIs](https://github.com/BeefreeSDK/beefree-sdk-docs/blob/main/broken-reference/README.md).

This site discusses the technical capabilities of Beefree SDK, and how to embed it into your web application. To learn more about the end user experience, and how your end users will interact with Beefree SDK on the frontend of your application, reference the [White Label End User Guide](https://docs.beefree.io/end-user-guide). Markdown files for this guide are available in this [GitHub repository](https://github.com/mailupinc/beefreeSDKwhiteLabelDocs), which you can clone and use as a starting point for building a knowledge base for your end users.

## Explore Beefree SDK

#### Beefree SDK Playground <a href="#beefree-sdk-playground" id="beefree-sdk-playground"></a>

If you'd like to test the drag-and-drop user experience and explore how easy it is to customize the editor but aren't quite ready to spin up your own test application, our [Playground](https://playground.beefree.io/) is the best place for you to get started. This simple, public implementation of the Beefree SDK helps you to:

* Experience how easy it is for your end users to create designs using the intuitive, drag-and-drop editor UI
* Easily test UI customizations (like [moving the sidebar](https://docs.beefree.io/beefree-sdk/getting-started/readme/installation/configuration-parameters#sidebarposition), rearranging or [grouping content tiles](https://docs.beefree.io/beefree-sdk/other-customizations/appearance/content-tile-grouping), or applying [Custom CSS](https://app.gitbook.com/o/2zoWGxtV7bjhbwBdjGPS/s/8c7XIQHfAtM23Dp3ozIC/~/diff/~/changes/534/other-customizations/appearance/custom-css))
* Explore how you can [import existing HTML](https://app.gitbook.com/o/2zoWGxtV7bjhbwBdjGPS/s/8c7XIQHfAtM23Dp3ozIC/~/diff/~/changes/534/apis/html-importer-api) to make it editable, and [export designs into HTML, image, or PDF formats](https://app.gitbook.com/o/2zoWGxtV7bjhbwBdjGPS/s/8c7XIQHfAtM23Dp3ozIC/~/diff/~/changes/534/apis/content-services-api/export)

<figure><img src="https://806400411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8c7XIQHfAtM23Dp3ozIC%2Fuploads%2FTngzoxIjL9OITg6Z5Tvb%2Fimage.png?alt=media&#x26;token=ee51886d-e03a-4b86-93c9-990394f3691e" alt=""><figcaption></figcaption></figure>

<a href="https://playground.beefree.io/" class="button primary">Visit the Playground → </a>

### Demo Apps

Check out the following public demo apps built with v0, Lovable, and Replit:&#x20;

* [Email Builder by Beefree SDK](https://v0-email-builder-beefree-sdk.vercel.app/) is a demo application built with [v0](https://v0.app/) that simulates how Beefree SDK's no-code drag-and-drop email builder and editor can be integrated into your web application. The demo application includes static dashboards for campaign performance (open rate, click rate, conversion rate, and revenue), campaign breakdown, and subscriber information. Click the following link to access Email Builder by Beefree SDK: <https://v0-email-builder-beefree-sdk.vercel.app/>  &#x20;
* [Marketing Buddy](https://beefree-sdk-demo-app-marketing-buddy.lovable.app/) is a demo application built with [Lovable](https://lovable.dev/) to simulate how Beefree SDK integrates within a Martech application's ecosystem. Click the following link to access Marketing Buddy: <https://beefree-sdk-demo-app-marketing-buddy.lovable.app/>&#x20;
* [Email Design Buddy](https://email-design-buddy-beefree-sdk.replit.app/) is a demo application built with [Replit](https://replit.com/) to simulate how Beefree SDK can be integrated into an email building and editing application. Click the following link to access Email Design Buddy: <https://email-design-buddy-beefree-sdk.replit.app/>&#x20;

## Start a Simple Implementation <a href="#welcome" id="welcome"></a>

Take the following steps to get started with Beefree SDK in a few minutes:

1. Create an account to access the [Developer Console](https://developers.beefree.io/signup) and obtain your credentials.
2. [Create a new subscription](https://docs.beefree.io/beefree-sdk/getting-started/readme/create-an-application#sign-up-for-account-in-the-developer-console) to get started. Beefree SDK offers a generous Free plan that includes each builder type mentioned in the previous section.
3. Create an application and [obtain your Client ID and Client Secret](https://docs.beefree.io/beefree-sdk/getting-started/readme/create-an-application#obtain-your-client-id-and-client-secret).
4. Clone the [beefree-sdk-sample-client repository](https://github.com/BeefreeSDK/beefree-sdk-sample-client), which includes the code for email and popup builder implementations.
5. Add your credentials, the Client ID and Client Secret from step three, inside the placeholders in the code.
6. Once the email builder, or popup builder, depending on which environment you chose, opens, you can start experimenting with the SDK's configuration by customizing the [configuration parameters](https://docs.beefree.io/beefree-sdk/getting-started/readme/installation/configuration-parameters) in the `beeConfig` section of the code.
7. You can also customize the SDK's configuration inside the [Developer Console](https://developers.beefree.io/login?from=website_menu) under the [Application configuration section](https://docs.beefree.io/beefree-sdk/server-side-configurations/server-side-options) of the application you created.

**Note:** Visit the [Beefree SDK pricing page](https://developers.beefree.io/pricing-plans) for a comprehensive list of features and the plan type they correspond to.

## Quickstart Guides by Framework <a href="#welcome" id="welcome"></a>

Reference Quickstart Guides specific to your tech stack:

* [React No-code Email Builder](https://docs.beefree.io/beefree-sdk/quickstart-guides/react-no-code-email-builder)
* [Vue.js No-code Email Builder](https://docs.beefree.io/beefree-sdk/quickstart-guides/vue.js-no-code-email-builder)
* [Angular No-code Email Builder](https://docs.beefree.io/beefree-sdk/quickstart-guides/angular-no-code-email-builder)
* [Django Beefree SDK Demo](https://docs.beefree.io/beefree-sdk/quickstart-guides/django-beefree-sdk-demo)

## Beefree SDK's Embeddable Builders <a href="#welcome" id="welcome"></a>

Learn more about our three embeddable builders.

<table data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="../visual-builders/email-builder">email-builder</a></td><td><a href="https://806400411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8c7XIQHfAtM23Dp3ozIC%2Fuploads%2Fo3nCwCIVfJLU8KIld6zg%2Femailbuilder-e1629383000405.png?alt=media&#x26;token=a2a69b99-5dc3-42e7-b106-d4607367c87f">emailbuilder-e1629383000405.png</a></td></tr><tr><td><a href="../visual-builders/page-builder">page-builder</a></td><td><a href="https://806400411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8c7XIQHfAtM23Dp3ozIC%2Fuploads%2F0pumUIDujRIWIRYEyfwi%2FPage-Builder.jpg?alt=media&#x26;token=f17beb5c-e3e7-4172-8d05-7632b8549a69">Page-Builder.jpg</a></td></tr><tr><td><a href="../visual-builders/popup-builder">popup-builder</a></td><td><a href="https://806400411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8c7XIQHfAtM23Dp3ozIC%2Fuploads%2F6xIgqNBjGykYWMsfNaiJ%2Fpopupbuilder-e1629383038360.png?alt=media&#x26;token=d9b49098-f08e-4a58-8f37-0bf5dc3e20b2">popupbuilder-e1629383038360.png</a></td></tr></tbody></table>

## File Manager

In addition to our drag-and-drop editors, we also offer a standalone [File Manager](https://docs.beefree.io/beefree-sdk/file-manager/file-manager-application-overview) application, which can be used alongside any of the builders. The File Manager is designed to simplify the organization and management of digital assets. It is an image and document management user interface that can be launched as a standalone application. This allows your customers to quickly upload or manage assets, without having to load one of the builders.

Learn more about our [File Manager](https://docs.beefree.io/beefree-sdk/file-manager/file-manager-application-overview) and [File Storage Options](https://docs.beefree.io/beefree-sdk/server-side-configurations/server-side-options/storage-options).

## Developer Essentials <a href="#about-this-documentation" id="about-this-documentation"></a>

### Sample Code

We have a whole library of handy sample code to help you get started with basic Beefree SDK implementations and also learn how to put more advanced features to work. You can check out the available sample code [here](https://docs.beefree.io/beefree-sdk/getting-started/sample-code) or head straight to [GitHub](https://github.com/BeefreeSDK).

### Videos <a href="#about-this-documentation" id="about-this-documentation"></a>

Learn more about Beefree SDK through [videos](https://docs.beefree.io/beefree-sdk/resources/videos). Explore [Tutorials](https://docs.beefree.io/beefree-sdk/resources/videos#tutorials), [Spotlight Sessions](https://docs.beefree.io/beefree-sdk/resources/videos#spotlight-sessions), and [Case Studies](https://docs.beefree.io/beefree-sdk/resources/videos#case-studies).

## Contribute to the Docs

The Beefree SDK technical documentation is available at docs.beefree.io/beefree-sdk and in the [beefree-sdk-docs GitHub repository](https://github.com/BeefreeSDK/beefree-sdk-docs).

You can contribute feedback to the documentation in one of the following ways:

* On docs.beefree.io/beefree-sdk use the **Was this helpful?** emoji option on the right hand side of each page. After selecting an emoji, you'll have the option to submit written feedback on what you'd like to see in the documentation. This feedback goes directly to the documentation team and is integrated frequently.
* Creating a pull request using the [beefree-sdk-docs GitHub repository](https://github.com/BeefreeSDK/beefree-sdk-docs). Use this option in the event you find a typo, broken link, or small fix.