QR Code Customization

Design and personalize your QR codes visually using our advanced plugin settings page with live preview. This guide explains each feature available for customizing the look, behavior, and download options of your QR code.

Design QR Code #

Body Dot Shape #

Customize the main body of the QR code using dot styles and gradient effects.

• Choose Design:
  Select from 6 unique body dot shapes. The preview will instantly update as you choose different styles.
• First Color:
  Main body color. Use the same color for both fields if you prefer a solid fill.
• Second Color:
  Secondary color for gradient effect.
• Type:
  Choose between Linear or Radial gradient types.
• Rotation:
  Set the rotation angle of the gradient (0°–360°).
• Level:
  Error correction level of the QR code. Default is L (Low).

 QR Code Eye Frame #

The Eye Frame is the outer box of the three position markers in a QR code.

• Choose Design:
  Select from 4 predefined eye frame shapes.
• First Color & Second Color:
  Define gradient colors. Use the same color twice for a solid design.
• Type:
  Choose Linear or Radial gradient.
• Rotation:
  Set the gradient rotation (0°–360°).

 QR Code Eye Ball #

The Eye Ball is the center dot inside each of the QR code’s three eye frames.

• Choose Design:
  Select from 3 customizable eyeball styles.
• First Color & Second Color:
  Gradient or solid fill options.
• Type:
  Linear or radial gradient.
• Rotation:
  Adjust the gradient direction from 0°–360°.

QR Code Shape + Border + Label #

Control the overall layout and framing of the QR code.

Shape & Style #

• Choose Shape:
  Circle – rounded edges
  Square – traditional design
• Add Border or Label?:
  Enable/disable the full customization of borders and labels.

Border Customization #

• Border Round:
  Value range: 0 (square) to 1 (fully rounded). Only applies when shape is circle.
• Thickness of Border:
  Set in pixels. Controls the border thickness around the QR code.
  ⚠️ Recommended: Keep the Margin ≥ Thickness.
• Margin:
  Adds clear space (padding) between the QR code and its border or background.
• Dasharray:
  Defines dashed border style using dash width dash count.
  • 0 1: No border
  • 0 0: Solid border
  • Custom values for dotted/dashed effect (e.g., 3 6)
• Border Color:
  Use the color picker to select your border color.

Top & Bottom Labels #

Top Label #

• Enable Label for Top?: Yes / No
• Input Text: Label text (e.g., your brand name)
• Font Size: Set the font size in pixels
• Text Color: Pick a color using the color selector

Bottom Label #

• Enable Label for Bottom?: Yes / No
• Input Text: Text below the QR code (e.g., “Scan Me”)
• Font Size: Font size in pixels
• Text Color: Color of the bottom text

 QR Code Size & Background #

Customize the display and download dimensions of your QR code.

• QR Code Frontend Size:
  Set the display size of the QR code on the frontend (in pixels).
• Download QR Code Size:
  Set the resolution/quality of the downloadable QR image.
• Background Color:
  Set a background color for the QR code. Transparent by default.
• Margin:
  Additional spacing between the background and QR graphic.
• Animation Preloader:
  Optionally enable a CSS-based preloader animation while the QR code loads.

Add Logo & Download Button #

Add Logo to QR Code #

• Upload Logo:
  Click the upload button to select a logo from the WordPress Media Library.
• Logo Size:
  Scale the logo from 0.1 (small) to 1.0 (full size relative to the QR area).
• Margin:
  Adjust spacing between the logo and QR content.

Setup Download Button #

• Enable Download Button:
  Allow users to download the generated QR code as an image.
• Download File Name:
  By default, the file name is based on the page title or URL. Enter a custom name if needed.

Live Preview #

All design changes are instantly reflected in the preview panel so you can visualize the QR code before using or downloading it.