# AX - Bar Code
## Overview
**AX - Barcode** is an Experience Cloud component that generates scannable codes—including QR codes, standard barcodes, and other formats—on Experience Sites pages based on Salesforce field values.
Use it to display codes for product numbers, order IDs, tracking information, event tickets, or any data that portal users need to scan with mobile devices. Configure the barcode type, size, and styling in Experience Builder to match your portal's branding.
Perfect for customer portals showing order barcodes, event registration pages with ticket QR codes, partner portals with product tracking, or self-service sites where users need scannable access codes.
***
## Configuring the barcode
### Customizing the barcode value
The value for the barcode can be set in two ways. Firstly, you can manually enter the desired value for the barcode. Alternatively, the value can be sourced from one of your existing collections. To use a value from a collection, switch to the '[Mapped](https://docs.avonniflowcomponents.com/getting-started/learn-the-basics#what-are-mapped-values)' input option and select the appropriate collection as your source.
Switch to Mapped input field to select a source collection as a value.
### Choosing the barcode type
The Barcode component renders more than 150 different types of barcodes. Select the one you need.
Main types of Barcode supported
* *
*
* *
*
* *
*
* *
*
* *
*
* *
*
* *
*
* *
*
* *
*
* *
*
* *
*
* *
*
* *
*
* *
*
## Specifications
{% tabs %}
{% tab title="🎛️ Properties" %}
| Name | Description | Usage |
| -------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| **Type** | Select the barcode type to be generated. | Choose the appropriate barcode symbology based on the use-case or industry standard. |
| **Value** | The data to be encoded into the barcode. | Enter the value that needs to be translated into barcode form. |
| **Checksum** | A boolean option to enable or disable the calculation of a checksum digit. | Toggle on to include a checksum digit in the barcode, providing an additional layer of data integrity. |
| **Width** | Define the width of the barcode. | Adjust the width based on the design considerations of your webpage or the physical constraints of the printed medium. |
| **Height** | Define the height of the barcode. | Customize the height to ensure that the barcode fits well within the allocated space and is easily scannable. |
| **Hide Value** | A boolean option to show or hide the encoded value beneath the barcode. | Toggle on to hide the numeric or alphanumeric value represented by the barcode, providing a cleaner visual presentation. |
| {% endtab %} | | |
{% tab title="🎨 Appareance" %}
| Name | Description | Usage |
| -------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Background Color** | Set the background color of the barcode component. | Choose a color that ensures good contrast with the barcode lines and numbers, ensuring readability and scannability. |
| **Color** | Set the color of the barcode lines and text. | Select a color that stands out against the background, optimizing visibility. |
| **Text Alignment** | Define the alignment of the text displayed below the barcode. | Adjust the text alignment to harmonize with the overall design and layout of the webpage or printed material. |
| **Text Color** | Set the color of the text displayed below the barcode. | Choose a color that is easily readable against the background color, ensuring that the encoded value is visually accessible. |
| {% endtab %} | | |
| {% endtabs %} | | |