Discover the amazing features of our latest product designed to make your life easier.
', color: '#666666' } }, { type: 'button', value: { label: 'Learn More', href: 'https://example.com/product', 'background-color': '#0066CC', color: '#FFFFFF', 'border-radius': 4, // Number, not string 'padding-top': 12, // Number, not string 'padding-right': 24, // Number, not string 'padding-bottom': 12, // Number, not string 'padding-left': 24 // Number, not string } } ] }); ``` -------------------------------- ### Example AI Assistant Info Response (Prompt Generation) Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/error-management/warning-error-info-callbacks.md Example data received when the user requests content generation via the AI Writing Assistant, showing token usage. ```json AddOn Information { "code": 1000, "message": "Token usage for addon handle: ai-integration", "detail": { "handle": "ai-integration", "promptId": "60bcc837-674c-4226-adad-91ee2a603b57", "usage": { "prompt_tokens": 50, "completion_tokens": 100, "total_tokens": 150, "uid": "string" }, }, } ``` -------------------------------- ### Example Upload Request Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/server-side-configurations/server-side-options/storage-options/connect-your-file-storage-system.md This example demonstrates a POST request to upload a file, including authorization and client identification headers, and a JSON payload with source URL and conflict strategy. ```http POST /mydir/my%20pic3.png Authorization: Basic 5AMPL3 X-BEE-ClientId: BeeFree X-BEE-Uid: 1111-2222-333-444 Content-Type: application/json { "source": "http://www.remotehost.com/remotepic.png", "conflict_strategy": "keep" } ``` -------------------------------- ### Alternative Setup with Makefile and Build Script Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/quickstart-guides/django-beefree-sdk-demo.md Convenience commands for setting up the project, including Python dependencies, frontend build, and running the development server. ```bash # Using the build script (recommended for first-time setup) ./build.sh # Or using Makefile commands make setup # Sets up Python venv, installs deps, runs migrations, builds frontend make run # Starts the Django development server ``` -------------------------------- ### Install Proxy Server Dependencies Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/quickstart-guides/react-no-code-email-builder.md Install the necessary npm packages for the proxy server, including express, cors, axios, and dotenv. This command should be run in your terminal before starting the proxy server. ```bash npm install express cors axios dotenv ``` -------------------------------- ### Clone Repository and Navigate Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/cookbook/use-liquid-in-beefree-sdk-for-email-personalization.md Clone the project repository and navigate into the directory to begin setup. ```bash git clone https://github.com/BeefreeSDK/beefree-liquid-email-personalization.git cd Liquid ``` -------------------------------- ### Get Session API Response Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/other-customizations/collaborative-editing/co-editing-integration-guide.md This is an example response body when a co-editing session is successfully retrieved. It includes template data and user information. ```json { "template": { "page": {...}, "comments": {} }, "users": { "test": { "userId": "test", "username": "test", "userColor": "#c0ffee" } } } ``` -------------------------------- ### Fetch All Templates - Go Client Example Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/videos/unleash-business-growth-with-email-templates-for-a-winning-edge.md This Go client example demonstrates how to fetch a list of all available templates from the Beefree SDK catalog. It shows the necessary endpoint, host name, and authorization header configuration. ```Go package main import ( "fmt" "io/ioutil" "net/http" "strings" ) func main() { // The host name is api.beefree.io, and this is the path, /catalog/templates. url := "https://api.beefree.io/catalog/templates" // In the header section, I need to fill the authorization header with the token I have generated in the developer console. header := "Bearer YOUR_API_TOKEN" client := &http.Client{} req, err := http.NewRequest("GET", url, nil) if err != nil { fmt.Println("Error creating request:", err) return } req.Header.Add("Authorization", header) resp, err := client.Do(req) if err != nil { fmt.Println("Error sending request:", err) return } defer resp.Body.Close() body, err := ioutil.ReadAll(resp.Body) if err != nil { fmt.Println("Error reading response body:", err) return } fmt.Println("Response Status:", resp.Status) fmt.Println("Response Body:", string(body)) } ``` -------------------------------- ### Initialize Beefree SDK with Configuration Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/getting-started/readme/installation/configuration-parameters/README.md Demonstrates the basic initialization of Beefree SDK with a token and the subsequent start method, passing a configuration object and a template. ```javascript const bee = new BeefreeSDK(token); bee.start(beeConfig, template); ``` -------------------------------- ### Example onChange Callback Function Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/getting-started/tracking-message-changes.md Use this callback function to log the JSON file and response whenever a message change occurs. It requires no special setup. ```javascript onChange: function (jsonFile, response) { console.log('json', jsonFile); console.log('response', response); }, ``` -------------------------------- ### Run Development Servers Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/cookbook/add-a-get-design-plain-text-button-to-beefree-sdk.md Start the Node.js proxy server and the React development server to run the sample application. ```bash npm run dev:proxy # starts the Node proxy npm run dev # starts the React app ``` -------------------------------- ### Configure AI Add-ons with Token Settings Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/builder-addons/partner-addons/ai-writing-assistant/token-upselling.md Configure available add-ons, including AI integration and AI alt text, with settings for token availability, usage, and upsell enablement. This setup guides users to purchase tokens for continued feature access. ```javascript addOns: [ { id: "ai-integration", // Unique identifier for the AI integration add-on settings: { tokensAvailable: tokensAvailable, // Total tokens available for AI usage tokensUsed: tokenCounter, // Counter for tokens used so far tokenLabel: 'tokens', // Label for the tokens isPromptDisabled: false, // Flag to disable prompt if needed isSuggestionsDisabled: false, // Flag to disable suggestions if needed isUpsellEnabled: isUpsellEnabled, // Flag to enable upsell functionality } }, { id: "ai-alt-text", // Unique identifier for the AI alt text add-on settings: { imagesAvailable: imagesAvailable, // Total images available for alt text generation imagesUsed: imagesCounter, // Counter for images used so far isPromptDisabled: (imagesCounter >= imagesAvailable) ? true : false, // Disable prompt if images limit is reached isUpsellEnabled: isUpsellEnabled, // Flag to enable upsell functionality } } ], ``` -------------------------------- ### Fetch Specific Template Details - Go Client Example Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/videos/unleash-business-growth-with-email-templates-for-a-winning-edge.md This Go client example shows how to retrieve detailed information for a specific template by using its slug. It includes the URL construction with the template slug and the necessary authorization header. ```Go package main import ( "fmt" "io/ioutil" "net/http" "strings" ) func main() { // For example, I put in the URL the slug of the template templateSlug := "your-template-slug" url := "https://api.beefree.io/catalog/templates/" + templateSlug // In the header section, I need to fill the authorization header with the token I have generated in the developer console. header := "Bearer YOUR_API_TOKEN" client := &http.Client{} req, err := http.NewRequest("GET", url, nil) if err != nil { fmt.Println("Error creating request:", err) return } req.Header.Add("Authorization", header) resp, err := client.Do(req) if err != nil { fmt.Println("Error sending request:", err) return } defer resp.Body.Close() body, err := ioutil.ReadAll(resp.Body) if err != nil { fmt.Println("Error reading response body:", err) return } fmt.Println("Response Status:", resp.Status) fmt.Println("Response Body:", string(body)) } ``` -------------------------------- ### Set Up Environment Variables Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/cookbook/use-liquid-in-beefree-sdk-for-email-personalization.md Create a .env file and populate it with your Beefree credentials. The API key is optional and used for importing HTML. ```bash # Create .env file with your Beefree credentials BEE_CLIENT_ID=your_client_id BEE_CLIENT_SECRET=your_client_secret BEE_API_KEY=your_api_key # Optional for Importing HTML if wanted ``` -------------------------------- ### Direct Open Example for Various AddOn Types Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/builder-addons/direct-open.md A comprehensive example demonstrating the 'Direct Open' configuration for multiple AddOn types, including custom UUIDs and predefined handles. It shows how to map AddOn IDs to their respective types and handle the `hasOpenOnDrop` logic within the dialog handler. ```javascript const ID_TYPES = { "cool-image-addon": "image", "cool-html-addon": "html", "cool-iframe-addon": "html", "cool-mixed-addon": "mixed", "cool-row-addon": "row", "cool-paragraph-addon": "paragraph", "cool-button-addon": "button", "cool-title-addon": "heading", "cool-list-addon": "list", "cool-menu-addon": "menu", "cool-icon-addon": "icon", } const beeConfig = { addOns: [ { // partner add-on uuid id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', openOnDrop: true }, { id: 'cool-iframe-addon', // your handle id openOnDrop: true }, { id: 'cool-mixed-addon', // your handle id openOnDrop: true }, { id: 'cool-paragraph-addon', // your handle id openOnDrop: true }, { id: 'cool-image-addon', // your handle id openOnDrop: true }, { id: 'cool-row-addon', // your handle id openOnDrop: true }, ], contentDialog: { addOns: { handler: function(resolve, reject, args) { const hasOpenedOnDrop = args.hasOpenOnDrop const addOnId = args?.contentDialogId console.log(`addon ${addOnId} opended automatically ${hasOpenedOnDrop}`) if (addOnId === 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx') { return } let attributes = undefined if (hasOpenedOnDrop) { const { attributes, mergeTags } = fetchStyles(addOnId) // preload content resolve({ type: ID_TYPES[addOnId], value: attributes, mergeTags, }) } if (!attributes) { attributes = prompt('Please enter your attributes') } resolve({ type: ID_TYPES[addOnId], value: { ...JSON.stringify(attributes) } }) } } } } ``` -------------------------------- ### Install Beefree SDK using Yarn Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/getting-started/readme/installation/authorization-process-in-detail.md Install the Beefree SDK package using Yarn. This is an alternative to npm for package installation. ```bash yarn add @beefree.io/sdk ``` -------------------------------- ### Install BeeFree SDK Dependencies Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/cookbook/use-liquid-in-beefree-sdk-for-email-personalization.md Install the necessary BeeFree SDK and React dependencies using npm. Ensure you have Node.js and npm installed. ```bash npm install @beefree.io/sdk react react-dom ``` -------------------------------- ### Install Beefree SDK in Angular Project Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/videos/angular-video-series.md Run this command in your Angular project directory to install the Beefree SDK. Ensure you have Node.js installed. ```bash npm install beefree.io-sdk ``` -------------------------------- ### Phase 2: Integration Setup Prompt Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/cookbook/build-full-stack-martech-apps-with-lovable-and-beefree-sdk.md For subsequent development phases, prompt for specific integrations like the Beefree SDK. Begin with essential components like the editor page and proxy server, deferring dynamic generation. ```plaintext Now add the Beefree SDK integration. Create the email editor page and proxy server, but start with basic template loading before adding dynamic generation. ``` -------------------------------- ### Example Error Response Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/error-management/json-parser-errors.md An example of a JSON error response structure. ```APIDOC ## Example Response ```json {"code":4001,"message":"Authentication error","details":"Authentication header is missing"} ``` ``` -------------------------------- ### Basic File Picker Example (Immediate Resolve) Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/other-customizations/advanced-options/custom-file-picker.md This example demonstrates the simplest file picker handler that immediately resolves with a hardcoded image URL. In a real application, this would be replaced by logic that opens a UI for the user to select a file. ```javascript contentDialog: { filePicker: { handler: function(resolve, reject) { resolve({ url: 'string', // url to the file (e.g. http://www.example.com/myimage.jpg) }) } }, } ``` -------------------------------- ### Initialize and Control Beefree SDK Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/getting-started/readme/installation/methods-and-events.md Demonstrates initializing the Beefree SDK instance and using its core methods for saving and previewing. It also shows how to configure callback functions for events like save and content change. ```javascript const bee = new BeefreeSDK(token); const beeInstance = bee.start(beeConfig, template); // Use methods to control the editor beeInstance.save(); beeInstance.preview(); // Configure callbacks to respond to events const beeConfig = { container: 'editor-container', onSave: function(jsonFile, htmlFile) { // Handle save event }, onChange: function(jsonFile, response) { // Handle content changes } }; ``` -------------------------------- ### Handle Session Start Callback Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/other-customizations/collaborative-editing/README.md Logs session information and prompts the user to copy the session ID when a session starts. ```javascript onSessionStarted: function(sessionInfo) { console.log('*** [integration] --> (onSessionStarted) ', sessionInfo) prompt('press ctrl+c to copy the session ID', sessionInfo.sessionId) } ``` -------------------------------- ### Complete Icon AddOn Example with Labels Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/builder-addons/custom-addons/custom-addon-types/icon-addon.md A comprehensive example showcasing all available icon properties, including text labels positioned below each icon and specific link targeting. This configuration ensures accessibility and visual cohesion for a social media bar. ```javascript resolve({ type: 'icons', value: { icons: [ { image: 'https://example.com/icons/facebook.png', text: 'Facebook', href: 'https://facebook.com', target: '_blank', alt: 'Visit our Facebook page', title: 'Facebook', width: '32px', height: '32px', textPosition: 'bottom' }, { image: 'https://example.com/icons/twitter.png', text: 'Twitter', href: 'https://twitter.com', target: '_blank', alt: 'Follow us on Twitter', title: 'Twitter', width: '32px', height: '32px', textPosition: 'bottom' }, { image: 'https://example.com/icons/linkedin.png', text: 'LinkedIn', href: 'https://linkedin.com', target: '_blank', alt: 'Connect on LinkedIn', title: 'LinkedIn', width: '32px', height: '32px', textPosition: 'bottom' } ] } }); ``` -------------------------------- ### Package Installation Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/getting-started/readme/installation/README.md Install the Beefree SDK using npm or yarn. The package includes TypeScript support and is licensed under Apache-2.0. ```bash npm install @beefree.io/sdk --save ``` ```bash yarn add @beefree.io/sdk ``` -------------------------------- ### Development Server Setup Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/quickstart-guides/django-beefree-sdk-demo.md Instructions for running the Django development server and the Vite development server concurrently for frontend hot reloading. ```bash # Start the Django server in one terminal python manage.py runserver # Start the Vite dev server in another terminal npm run dev ``` -------------------------------- ### Example JSON Error Response Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/resources/error-management/json-parser-errors.md This is an example of a JSON response indicating an authentication error with specific code, message, and details. ```json {"code":4001,"message":"Authentication error","details":"Authentication header is missing"} ``` -------------------------------- ### Basic Menu AddOn Example Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/builder-addons/custom-addons/custom-addon-types/menu-addon.md Creates a simple navigation menu with three common links, each configured with text, URL, and target behavior. ```javascript resolve({ type: 'menu', value: { items: [ { text: 'Home', link: { title: 'Home', href: 'https://example.com', target: '_self' } }, { text: 'About', link: { title: 'About Us', href: 'https://example.com/about', target: '_self' } }, { text: 'Contact', link: { title: 'Contact Us', href: 'https://example.com/contact', target: '_self' } } ] } }); ``` -------------------------------- ### Initialize Beefree SDK with Configuration Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/builder-addons/custom-addons/build-addons-with-content-dialog.md Initialize the Beefree SDK using your authentication token and the configured beeConfig object. The bee.start() method loads the editor, optionally with a template. ```javascript const bee = new BeePlugin(token, beeConfig); bee.start(template); ``` -------------------------------- ### Beefree SDK Login Response Example Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/getting-started/readme/installation/authorization-process-in-detail.md Example JSON response after a successful server-side login, containing the access token. ```json { "access_token": "...", "v2": true } ``` -------------------------------- ### Initialize Beefree Editor with Authentication Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/getting-started/readme/installation/README.md Example implementation in Node.js demonstrating how to fetch an authentication token from a backend proxy and initialize the Beefree SDK. Ensure the UID is consistent between authentication and SDK configuration. ```javascript async function initializeBeefreeEditor(templateJson, beeConfig) { try { const response = await fetch('http://localhost:3001/proxy/bee-auth', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ uid: 'demo-user' }) // customize UID if needed }); if (!response.ok) { throw new Error('Failed to fetch token from proxy server'); } const { token } = await response.json(); const BeefreeSDKInstance = new BeefreeSDK(token); await BeefreeSDKInstance.start(beeConfig, templateJson, "", { shared: false }); // templateJson is your design content } catch (error) { console.error('Error initializing Beefree SDK:', error); } } ``` -------------------------------- ### Install MCP Proxy Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/quickstart-guides/connect-the-docs-to-your-ide.md Install the mcp-proxy tool using pipx. This is required for Zed to connect to the Beefree SDK docs server. ```bash pipx install mcp-proxy ``` -------------------------------- ### Customize Notification Template Text Source: https://github.com/beefreesdk/beefree-sdk-docs/blob/main/builder-addons/partner-addons/ai-writing-assistant/token-upselling.md Examples of how to modify the template string. One example removes the CTA, and the other changes the CTA label. ```javascript // To remove the CTA: const customTemplateWithoutCTA = "You're out of {tokenLabel}."; ``` ```javascript // To change the CTA label: const customTemplateWithCustomCTA = "You're out of {tokenLabel}. Click here to refill."; ```