Skip to content
Bilberry Widget Docs

Gift card button widget

Gift Card Button Widget

The Gift Card Button Widget enables users to purchase gift cards through an intuitive checkout process. This widget integrates seamlessly with the booking flow, allowing gift card codes to be applied during standard bookings.

Key Features

  1. Gift Card Purchase Initiates a checkout process where users can select gift card values and complete their purchase.

  2. Configurable Value Increments Customize the available gift card amounts to suit your business needs.

  3. Promo Code Support Optionally enable promo codes for gift card purchases.

  4. Responsive Design Adapts to both desktop and mobile screens for an optimized user experience.

Widget in Action

Widget Configuration

Before adding the widget, configure the global settings to enable and customize the gift card feature:

Enable Gift Cards:

window.BilberryWidgetsGlobal.enableGiftcards = true;

Configure Value Increments:

Define the increments for gift card values:

window.BilberryWidgetsGlobal.giftCardPriceIncrements = [10, 25, 50, 100];

Enable Promo Codes for Gift Cards:

Allow users to apply promo codes when purchasing gift cards:

window.BilberryWidgetsGlobal.enableGiftcardPromoCodes = true;

How to Use

Add the widget to your webpage using the HTML snippet below. Customize its properties as needed.

Example:

<bilberry-gift-card-button size="m" xs-size="s"></bilberry-gift-card-button>

Widget Properties

PropertyDescriptionDefault ValueRequired
sizeSize of the button on medium to large screens. Options: s, m, l.sNo
xs-sizeSize of the button on small screens (mobile). Options: s, m, l.sNo

Text Customization Properties

PropertyDescriptionDefault ValueRequired
button-text-customization-keyCustom text for the button. Unset by default.UnsetNo

To customize the button text, use the button-text-customization-key and define the corresponding text in your global text customization settings.

Setting Up on Wix

If you’re using Wix as your website builder, follow these steps to configure the widget:

  1. Access the Configuration Guide: Refer to the relevant guide in these docs for general widget setup on Wix.
  2. Use the Following Values:
    • Server URL: https://bilberry-widgets.b-cdn.net/v4/wix-wrappers/WixBilberryGiftcardButton.js
    • Tag Name: wix-bilberry-gift-card-button

Tips for Effective Integration

  1. Optimize Value Increments: Configure gift card increments that match user expectations and your pricing strategy.
  2. Enable Promo Codes Thoughtfully: Allow promo codes only if it aligns with your promotional strategy.
  3. Prominent Placement: Add the widget to high-traffic pages for better visibility.
  4. Test Custom Text: Use the text customization property to ensure the button aligns with your branding.
  5. Mobile Optimization: Adjust the xs-size property for an enhanced mobile experience.

By integrating the Gift Card Button Widget, you can boost engagement and sales, providing an intuitive way for users to purchase and redeem gift cards.