Gift Cards in Framer

Bookla Gift Card Widget is a powerful tool for developers to integrate a customizable gift card sales component into their Framer projects.

Whether you're selling gift cards for services, experiences, or products, this widget simplifies the sales process while maintaining a sleek and professional design that matches your brand.

Benefits

• Effortless integration with Framer
• Full customization options to match your branding
• Supports multiple gift card denominations
• Guest checkout and authenticated purchases
• Automatic gift card code generation
• Multi-language support with locale settings

Usage

With this widget, you can allow customers to purchase gift cards directly from your webpage, which recipients can later redeem for your services.

The widget supports flexible gift card configurations:

Feature	Description	Configuration
Multiple Denominations	Offer various gift card amounts	Set in Bookla Platform
Validity Periods	Customizable expiration periods	Configure per gift card
Tax Handling	Automatic tax calculations	Based on company settings
Custom Forms	Collect additional information	Add custom fields
Guest Checkout	Allow purchases without registration	Enable guest mode

I. Prerequisites

Before using the Gift Card widget from Bookla Plugin, ensure you have the following:

1. Create a Company in Bookla

This step is essential as it links your company ID to the Framer widget.

• Open Bookla Platform and tap 'Create Account'
• Use your credentials to create an account or log in
• Create your company or use an invitation code to open it

2. Set Up Your Gift Cards

Gift cards in Bookla represent monetary value that customers can purchase and recipients can redeem for your services.

Creating a Gift Card:

1. Navigate to Plugins and ensure the Gift Cards plugin is enabled
2. Navigate to Gift Cards in the left sidebar
3. Click "Create Gift Card"
4. Configure the following:

• Name: Give your gift card a descriptive title (e.g., "$50 Gift Card", "Birthday Special")
• Amount: Set the monetary value in cents (e.g., 5000 for $50)
• Currency: Select your currency (USD, EUR, etc.)
• Validity Duration: Set how long the gift card is valid in days
• Tax Settings: Configure tax rate and whether it's inclusive
• Set Expiry Date: Set when the gift card expires and can no longer be purchased

5. Active - Ensure the toggle is set to "Active" for the gift card to be available for purchase

3. Configure Payment Settings

Gift cards require payment processing to be set up:

1. Go to Plugins in the Bookla Platform
2. Connect your payment provider (Stripe, Mercado Pago, etc.)
3. Test payment flow with a test transaction

See Payment Setup Tutorial

4. Generate API Credentials

You'll need these to connect the widget to your Bookla account:

1. Navigate to Developers section
2. Click "API Keys"
3. Create a new API key with the following scopes:

• Client Service - View access
• Client Resource - View access
• Guest Client - For guest checkout

II. Adding the Widget in Framer

Learn how to seamlessly integrate the Bookla Gift Card widget into your Framer project.

1. Install the Bookla Plugin
2. Drag the Gift Card Widget
3. Customize your Widget
4. Connect the Widget to Platform
5. Test and Publish

Step 1: Install the Bookla Plugin

• Navigate to the Framer Marketplace
• Tap 'Open Plugin in…' and select the Framer project where you want to use the Gift Card Widget

Or install directly from your Framer Canvas:

• Tap 'Plugins'
• Type 'Bookla' and select to open it

Step 2: Drag the Gift Card Widget

• Open the page where you want to add the gift card widget
• Select "Gift Cards" from the Bookla Plugin panel
• Drag it onto your design canvas
• A placeholder widget will appear

Step 3: Customize your Widget

3.1 Layout & Responsive Design

• Place the Gift Card widget in an auto layout for responsive behavior
• Use the 'Fill' setting to make your widget adapt to different screen sizes
• Adjust the overall structure using Framer's layout tools

3.2 Widget Structure

The widget consists of three main elements:

1. Widget Container - The outer wrapper
2. Blocks - Sections like gift card list, form fields, terms
3. Items - Individual gift cards and form inputs

3.3 UI Customizations

1. Size Settings Adjust the widget's overall size (small, medium, large) to fit your design:

2. Color Scheme Customize colors to match your brand:

• Primary Color: Main text and active elements
• Secondary Color: Supporting text and descriptions
• Background: Widget background color
• Item Colors: Individual gift card styling
• Button Colors: Purchase button appearance

3. Typography

• Set a custom font family that aligns with your brand
• Default uses Inter font

4. Spacing

• Gap: Space between blocks
• Padding: Internal spacing within blocks
• Border Radius: Rounded corners for modern design

3.4 Content Settings

1. Texts Customize all text strings in the widget:

• Title: "Choose Gift Card"
• Subtitle: "Select a gift card amount below"
• Summary Title: "Gift Card Summary"
• Buy Text: "Purchase Gift Card"
• Validity Text: "Valid for"
• Loading/Error Messages: User feedback text

2. Locale Set the locale for:

• Date formats (US vs European)
• Language for validity periods
• Currency formatting

Example locales:

• en-US: English (United States)
• es-ES: Spanish (Spain)
• fr-FR: French (France)
• de-DE: German (Germany)

3. Guest Mode Enable or disable guest checkout:

• When enabled, collects recipient details
• Customizable form labels
• Email validation included

4. Custom Form Fields Add additional fields to collect information:

• Recipient message
• Sender name
• Special occasion selection
• Delivery date preference

5. Terms & Conditions Optional terms acceptance:

• Customizable terms text
• Link to full terms page
• Required before purchase

3.5 Advanced Settings

1. Preselection

• Set a specific gift card ID to preselect
• Useful for direct links to specific amounts
• Skips the selection step

2. Custom Gift Cards Override the gift card list with custom options:

• Custom titles
• Custom subtitles
• Filter which gift cards to show

3. Animations

• Enable/disable smooth transitions
• Card hover effects
• Loading states

Step 4: Connect the Widget to Platform

4.1 Configure Bookla Settings

In the widget settings, scroll to the 'Bookla' section and configure:

1. API Region

• Select your region (US or EU)
• Must match your Bookla account region

2. API Key

• Paste the API key generated in prerequisites
• Ensure it has the required scopes

3. Company ID

• Found in Bookla Platform → Company → ID
• Copy and paste the complete ID

4. Gift Card ID (Optional)

• For preselecting a specific gift card
• Leave empty to show all available gift cards

Step 5: Send Confirmation Emails

To send gift card codes via email, ensure you have the Email Notifications plugin enabled in Bookla:

1. Go to Plugins in Bookla Platform
2. Enable Email Notifications
3. Click + Create Template
4. Select Template type Merchant/Client.
5. Event type Gift Card Purchased.
6. Customize the email content using placeholders:

Dear {{.clientFirstName}},

Your gift card for {{.amount}} has been successfully purchased.

Gift Card Details:
Gift Card: {{.giftCard}}
Period: {{.activeFrom}} - {{.validUntil}}
Code: {{.code}}
Purchase ID: {{.purchaseId}}

Step 6: Test and Publish

Testing Your Integration

1. Preview Mode

• Use Framer's preview to test the widget appearance
• Verify all customizations are applied correctly

2. Test Purchase Flow

• Make a test purchase with a test payment method
• Verify the complete flow:
• Gift card selection
• Form submission (if guest mode)
• Payment redirect
• Success confirmation

3. Verify in Bookla Platform

• Check Gift Cards → Contracts to see test purchases
• Verify gift card codes are generated
• Check email notifications are sent

Debugging Tips

Common issues and solutions:

Issue	Solution
Widget not loading	Verify API key and Company ID are correct
No gift cards showing	Ensure gift cards are enabled in Bookla Platform
Payment fails	Check payment provider configuration
Wrong prices displayed	Verify currency settings match
Form validation errors	Check required field settings

Publishing

Once testing is complete:

1. Click Publish in Framer
2. Verify the widget works on the live site
3. Monitor first real purchases in Bookla Platform

Best Practices

Design Recommendations

• Keep the widget above the fold for visibility
• Use contrasting colors for the purchase button
• Ensure text is readable on all backgrounds
• Test on mobile devices for responsive design

Content Guidelines

• Clearly state validity periods
• Include any restrictions in the description
• Provide customer support contact information
• Add FAQs about gift card usage

Frequently Asked Questions

Q: Can recipients use partial gift card amounts? A: Yes, gift cards can be used multiple times until the balance is exhausted.

Q: How are gift card codes delivered? A: Codes are automatically generated and sent via email to the purchaser or recipient (Email Notifications plugin required).

Q: Can I offer custom gift card amounts? A: Currently, you need to create predefined amounts in the Bookla Platform.

Q: Do gift cards expire? A: Yes, based on the validity duration you set (e.g., 1 year).

Q: Can I style the payment page? A: The payment page styling is handled by your payment provider settings.