> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-bar-code.md).
# 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.
## Configuration
### Choosing the barcode type
The Barcode component renders 103 different types of barcodes. Select the one you need.
Main types of Barcode supported
* **2D codes:** QR Code, Data Matrix, PDF417, Aztec Code, MaxiCode, DotCode
* **Retail / product (1D):** EAN-13, EAN-8, UPC-A, UPC-E, GS1-128
* **Logistics / shipping:** ITF-14, Code 128, Interleaved 2 of 5, GS1 DataBar
* **General purpose (1D):** Code 39, Code 93, Codabar, MSI, Plessey, Telepen
* **Postal:** USPS Intelligent Mail (OneCode), POSTNET, PLANET, Royal Mail, Australia Post, Japan Post
* **Pharmaceutical:** Pharmacode, PZN, HIBC
The full set of 103 supported symbologies is available in the component's **Type** property.
### Properties
**Type** selects the barcode symbology to generate — choose the appropriate type based on your use case or industry standard.
**Value** is the data to be encoded into the barcode.
**Checksum** enables or disables the calculation of a checksum digit, adding a layer of data integrity when the barcode type supports it.
**Width** and **Height** define the barcode's dimensions so it fits well within the allocated space and remains easily scannable.
**Hide Value** shows or hides the encoded value beneath the barcode, providing a cleaner visual presentation.
**Alternative Text** provides accessible text describing the barcode.
## Styling
{% tabs %}
{% tab title="Appearance" %}
| 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** | Position the encoded value around the barcode. Twelve values pair a vertical band (`top`, `center`, `bottom`) with a horizontal one (`left`, `center`, `right`, `justify`), for example `top-left` or `bottom-justify`. Defaults to `bottom-center`. | 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 %} | | |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-bar-code.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.