[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore project structure handling third party scripts in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-overview)

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

[Implementing regionalization features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-implementing-regionalization-features)

[Implementing search features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-implementing-search-features)

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-overview)

[Adding third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts)

[Building navigation menus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-building-navigation-menus)

[Displaying content for authenticated users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-displaying-content-for-authenticated-users)

[Implementing regionalization features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-implementing-regionalization-features)

[Implementing search features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-implementing-search-features)

[Managing product images in specific contexts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-managing-product-images-in-specific-contexts)

[Implementing Delivery Promise](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/delivery-promise-implementation)

[Implementing Live Shopping for FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-overview)

Adding third-party scripts

In this guide, learn how to add third-party scripts to FastStore projects.

Third-party scripts are elements embedded in a webpage but served from a different domain than the one the user visits. Examples of these scripts include social media buttons, video players, ads, analytics tools, and other elements contributing to a more dynamic and interactive web experience.

> There is an ongoing issue where FastStore stores are not receiving Google Tag Manager (GTM) events due to an integration conflict between FastStore and [Partytown](https://read.calvincode.net/reader?url=https://partytown.builder.io/). The team is actively working on a fix.
>
> In the meantime, please follow the workaround outlined in this [Known Issue article](https://read.calvincode.net/reader?url=https://help.vtex.com/en/known-issues/gtm-scripts-are-not-loading-on-the-native-thirdparty-scripts--4hTYThw8092OCHhUIvpCAa).

## Before you begin

### Choose essential third-party scripts

To maintain your website's performance without compromising the functionality offered by third-party scripts, consider incorporating only those third-party scripts that enhance the value of your website.

### Update the `@faststore/core` version

Ensure your project uses `@faststore/core` version `2.1.82` or above. If not, follow these steps:

1. Open the FastStore code project.
2. Navigate to the `package.json` file.
3. Find the `@faststore/core` package and change its version to `2.1.82`.
4. In your terminal, run `yarn install` to update the package in the project.

### Verify compatibility with Partytown

FastStore uses [Partytown](https://read.calvincode.net/reader?url=https://partytown.builder.io/) for script execution. Not all third-party scripts may be compatible with Partytown, so we strongly recommend testing third-party scripts with Partytown before implementing them. If any issues occur, avoid using those particular scripts.

---

## Instructions

1. In your FastStore project, navigate to the `src` folder and create a folder named `scripts`.
2. Within the `src/scripts` folder, create the `ThirdPartyScripts.tsx` file.
3. In the `ThirdPartyScripts.tsx` file, add your script as the example below:
src/scripts/ThirdPartyScripts.tsx
`1
const ThirdPartyScripts = () => {
2
 return (
3
 <script
4
 type="text/partytown"
5
 dangerouslySetInnerHTML={{
6
 // Add your script here and remove the console.log example
7
 __html: "console.log('🚀 Hello from a third-party script!')",
8
 }}
9
 />
10
 )
11
}
12

13
export default ThirdPartyScripts
`
4. Run `yarn dev` in the terminal to start the development server and execute the script you have added.
5. Access the provided localhost URL in your browser, open the Developer Tools, and go to the `Console` tab. You should be able to see the message: `🚀Hello from a third-party script!`:
![{"base64":"  ","img":{"width":2828,"height":1416,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1211549,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/third-party-scripts___2f9d925975b6217a5c3872ed96fc6bd7.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/third-party-scripts___2f9d925975b6217a5c3872ed96fc6bd7.png)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/storefront-features/handling-third-party-scripts.mdx)

[Implementing storefront features« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-overview)[Building navigation menusNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-building-navigation-menus)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23before-you-begin)

[Choose essential third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23choose-essential-third-party-scripts)[Update the @faststore/core version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23update-the-faststorecore-version)[Verify compatibility with Partytown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23verify-compatibility-with-partytown)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23instructions)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/storefront-features/handling-third-party-scripts.mdx)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23before-you-begin)

[Choose essential third-party scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23choose-essential-third-party-scripts)[Update the @faststore/core version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23update-the-faststorecore-version)[Verify compatibility with Partytown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23verify-compatibility-with-partytown)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/project-structure-handling-third-party-scripts/docs/guides/faststore/storefront-features-handling-third-party-scripts%23instructions)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides including order variables in the transactional email template in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

[Setting up DKIM for transactional emails](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/setting-up-dkim-for-transactional-emails)

[Setting up the SPF](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/setting-up-the-spf)

[How to set up functions in the Message Center templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/how-to-set-up-functions-in-the-message-center-templates)

[Including order variables in the transactional email template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/including-order-variables-in-the-transactional-email-template)

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

[Setting up DKIM for transactional emails](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/setting-up-dkim-for-transactional-emails)

[Setting up the SPF](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/setting-up-the-spf)

[How to set up functions in the Message Center templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/how-to-set-up-functions-in-the-message-center-templates)

[Including order variables in the transactional email template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/including-order-variables-in-the-transactional-email-template)

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides)

Message Center

[Including order variables in the transactional email template](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/including-order-variables-in-the-transactional-email-template)

Including order variables in the transactional email template

Learn how to use variables and create custom Message Center templates.

In the **Message Center**, under the **Templates** tab, you will find the transactional email templates sent to your clients.

Some of them are fired when the status of an order changes. For example:

* **Order Confirmation**: email sent when the order was made successfully.
* **Billed Order**: email sent when the order is billed.
* **Delivery canceled**: email sent when the order is canceled.

You can customize all of the Message Center templates, and you have a series of variables at your disposal that allow you to add data to the email dynamically.

These variables are JSON properties in the **JSON Data** field and can be used in the email's HTML. Insert them into double keys using the following format: `{{variable}}`

## Example

> Examples of JSON Data will only appear in the templates when you develop the desired action in your store. If you have not transacted an order, a recurrence, or any other action, JSON Data will be blank.

Let's say you want to enter the carrier's name in the "product sent" email.

To do this, enter the "product sent" template and search for the' courier' property in the **JSON Data** field.

![{"base64":"  ","img":{"width":1204,"height":656,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":106965,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/including-order-variables-in-the-transactional-email-template-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/including-order-variables-in-the-transactional-email-template-0.png)

The filled-in value for this property is just an example, but you can use it in the **HTML** field so that when the email is sent, the customer sees the carrier that is actually responsible for the order delivery.

Note that the `courier` property is inside the `package` object. Therefore, you need to enter it as follows:

`{{package.courier}}`

![{"base64":"  ","img":{"width":1202,"height":989,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":174816,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/including-order-variables-in-the-transactional-email-template-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/including-order-variables-in-the-transactional-email-template-1.png)

As you see, the sample value ("Transportadora Teste Courier S.A.") was inserted in the preview screen, below the **HTML** and **JSON Data** fields.

## Other order email variables

Among the properties of order JSONs that can be used as variables in transactional email templates are:

`` 1

{

2

 "data": {

3

 "h-0": "Properties",

4

 "h-1": "Definition",

5

 "0-0": "`courier`",

6

 "0-1": "Courier",

7

 "1-0": "`invoiceNumber`",

8

 "1-1": "Invoice number",

9

 "2-0": "`invoiceValue`",

10

 "2-1": "Invoice value",

11

 "3-0": "`invoiceUrl`",

12

 "3-1": "Invoice URL",

13

 "4-0": "`issuanceDate`",

14

 "4-1": "Date of issue",

15

 "5-0": "`trackingNumber`",

16

 "5-1": "Order tracking number",

17

 "6-0": "`invoiceKey`",

18

 "6-1": "Invoice access key",

19

 "7-0": "`trackingUrl`",

20

 "7-1": "Order tracking URL (informed by the carrier)"

21

 },

22

 "cols": 2,

23

 "rows": 8

24

}

 ``

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7108339%3Fv%3D4%26w=64%26q=75)](https://github.com/brunoamui)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Message-Center/templates/including-order-variables-in-the-transactional-email-template.md)

[How to set up functions in the Message Center templates« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template//docs/guides/how-to-set-up-functions-in-the-message-center-templates)[Scheduling prices for a range of hoursNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template//docs/guides/scheduling-prices-for-a-range-of-hours)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7108339%3Fv%3D4%26w=64%26q=75)](https://github.com/brunoamui)

ON THIS PAGE

[Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/including-order-variables-in-the-transactional-email-template%23example)

[Other order email variables](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/including-order-variables-in-the-transactional-email-template%23other-order-email-variables)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Message-Center/templates/including-order-variables-in-the-transactional-email-template.md)

Copy page

On this page

ON THIS PAGE

[Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/including-order-variables-in-the-transactional-email-template%23example)

[Other order email variables](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/including-order-variables-in-the-transactional-email-template/docs/guides/including-order-variables-in-the-transactional-email-template%23other-order-email-variables)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex io documentation 7 consuming data in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/app-development)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data)

6\. Consuming data

Learn how to communicate with the backend system in VTEX IO using GraphQL APIs.

Now you need to learn how this new component will talk with the _backend_ system, in other words, how it is going to **consume and insert data in the platform**.

Communication between storefront apps and VTEX IO is done through **GraphQL APIs**.

## Understanding GraphQL

GraphQL is a language for APIs whose main advantage is **to request specific data through a single endpoint**, avoiding _overfetching_ and _underfetching_.

To manage the data consumed in GraphQL, we will use a library called [**React Apollo**](https://read.calvincode.net/reader?url=https://www.npmjs.com/package/react-apollo) that provides native components to perform data searches.

The main components in this library are:

| Name                                                                    | Description                                                                                |
| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| [useQuery](https://read.calvincode.net/reader?url=https://www.apollographql.com/docs/react/data/queries/)      | _React hook_ which, when executed, queries the server using the _GraphQL API_ and returns what was requested in the _query_ variables.                |
| [useMutation](https://read.calvincode.net/reader?url=https://www.apollographql.com/docs/react/data/mutations/) | _React hook_, which returns a function that, when executed, communicates with the server from the _GraphQL API_ to send _updates_ and overwrite data. |

The `useQuery` _React hook_ returns an object with the following properties:

* `loading` (`boolean`) - Returns `true` if the _GraphQL API_ is still being executed. Otherwise, it returns `false`.
* `error` (`any`) - Only assumes a value when an error occurs when communicating with the server.
* `data` (`any`) - Contains the object returned from the _query_ execution.

The `useMutation` _React hook_ returns an _array_ containing:

* A function that can be called at any time to communicate with the server.
* An object that represents the current state of _mutation_ that has the properties `loading`, `error`, and `data`.

Keeping in mind the objects received by the `useQuery` and `useMutation` _React hooks_, you can define what you want to render in _React_ for the specific `loading` and `error` conditions, in addition to managing the content returned by queries made in the API (stored in `data`).

> To better understand the detailed instructions below, we recommended having a basic knowledge of the GraphQL language. If you are not familiar with this solution, we recommended checking the [documentation](https://read.calvincode.net/reader?url=https://graphql.org/learn/) and reading it carefully before proceeding to the next steps.

## Installing the React Apollo library

Using your terminal, access your app's directory and run the command shown below to install the `npm` _React Apollo_ library:

`1

yarn add react-apollo

`

## Making queries in GraphQL

For your component to render the information provided by the VTEX IO platform, you have to query the data stored on the server using _GraphQL APIs_.

![{"base64":"  ","img":{"width":2482,"height":1984,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":131211,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-7-consuming-data-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-7-consuming-data-0.png)

We will use the `useQuery` _React hook_ to do this:

1. Open your app's code in the code editor of your choice.
2. In the `react` folder, access the`HelloData.tsx` file or create it if it does not already exist.
3. In this file, copy and paste the basic model below to build your _GraphQL query_:

`` 1

import { useQuery } from 'react-apollo'

2

import QUERY_VALUE from './helloData.gql'

3

4

const HelloData = () => {

5

 const { loading, error, data } = useQuery(QUERY_VALUE)

6

7

 if (loading) {

8

 return 'Loading…'

9

 }

10

 if (error) {

11

 return `Error $\{error\}`

12

 }

13

14

 return `Done fetching $\{data\}`

15

}

16

17

export default HelloData

 ``

Note that the `QUERY_VALUE` property is being imported from another file called `helloData.gql`. The `.gql` extension hints that it is a file written in _GraphQL_. The content of this file varies depending on the _query_ that the app will send as a request.

A simple example for `helloData.gql` would be:

`1

query hello {

2

 hero {

3

 name

4

 height

5

 }

6

}

`

The response, depending on the database, could be something like:

`1

{

2

 "hero": {

3

 "name": "Luke Skywalker",

4

 "height": 1.72,

5

 }

6

}

`

Note how the `useQuery` React hook returns an object with `loading`, `error`, and `data` as parameters, which are completed from the query done on the server. By holding the values of these parameters, you can **condition what is rendered in the interface**.

According to the example above, if `loading` returns `true`, the message `Loading...` will be rendered. If an error occurs, the message `Error {error description}` will be rendered instead. Finally, if the `data` parameter receives the values of the executed _query_ correctly, the message `Done fetching {data obtained from the query}` will be rendered.

> Check [this](https://read.calvincode.net/reader?url=https://www.apollographql.com/docs/react/data/queries/) practical example of a GraphQL query.

## Mutating in GraphQL

In addition to _queries_, _mutations_ are another type of operation available for GraphQL APIs.

_Mutations_ are used to insert or modify data that already exists on the platform. They are used for sending _updates_ to the server.

![{"base64":"  ","img":{"width":2392,"height":1534,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":95361,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-7-consuming-data-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-7-consuming-data-1.png)

1. Open your app's code in the code editor of your choice.
2. In the `react` folder, access the `HelloMutation.tsx` file or create it if it does not already exist.
3. In this file, copy and paste the basic model below to run a _mutation_ `gql` using the _React_ component:

`1

import { useMutation } from 'react-apollo'

2

import MUTATION_VALUE from './helloMutation.gql'

3

4

const HelloMutation = () => {

5

 const [doSomething] = useMutation(MUTATION_VALUE)

6

7

 return <button onClick={() => { doSomething() }}>Click me</button>

8

}

9

10

export default HelloMutation

`

In this case, unlike the `useQuery` _hook_ where the _query_ is executed immediately, the call to the server will only be made after calling the function returned by the `useMutation` _hook_ (`doSomething` in this example).

You can add _mutation_ parameters as `doSomething` function variables.

Suppose that one of the _mutation_ variables you are running is the name of a city (`cityName`). One way to pass this variable would be:

`1

- return <button onClick={() => { doSomething() }}>Click me</button>

2

+ return <button onClick={() => { doSomething({ variables: { cityName: 'Rio' ) }}>Click me</button>

`

> Check [this](https://read.calvincode.net/reader?url=https://www.apollographql.com/docs/react/data/mutations/) practical example of a GraphQL mutation.

## Debugging queries and mutations in GraphQL

To test GraphQL _queries_ and _mutations_, we will use the GraphQL IDE app.

To install this app on your VTEX account, run the following command on your terminal:

`1

vtex install vtex.admin-graphql-ide

`

Once the app is installed, follow the steps below:

1. Access the Admin.
2. In the sidebar, go to **Apps**.
3. Look for GraphQL IDE in the installed apps list.
4. In the `Choose your app from the list below` field, select the app you want to debug/test. In this case, you need to choose the name of the app you are developing.

> Remember that, until now, the front app you have been developing has been living in your local files, connected to the VTEX platform only by the `link`. To find the name of your app in this list and be able to debug, it needs to be available (published) and properly installed in the account's master workspace. The necessary settings to make your app publicly available are described in the last section of this walkthrough.

1. On the left side of the text editor, enter the _query_ or _mutation_ that you want to run for testing purposes.
2. Then, click the _play_ button, and the API query response will appear in the text editor to the right.

If you need help, there is a `docs` tab on the right corner of your screen that describes the queries and mutations available for the selected app.

![{"base64":"  ","img":{"width":2704,"height":1718,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":325358,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-7-consuming-data-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-7-consuming-data-2.png)

The example above shows how to use the GraphQL IDE Admin to query an internal route in the `vtex.rewriter` app.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-7-consuming-data.md)

[5\. Structuring documentation« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data//docs/guides/vtex-io-documentation-6-structuring-documentation)[7\. Translating the componentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data//docs/guides/vtex-io-documentation-8-translating-the-component)

See also

[7\. Translating the componentApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-8-translating-the-component)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Understanding GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23understanding-graphql)

[Installing the React Apollo library](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23installing-the-react-apollo-library)

[Making queries in GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23making-queries-in-graphql)

[Mutating in GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23mutating-in-graphql)

[Debugging queries and mutations in GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23debugging-queries-and-mutations-in-graphql)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-7-consuming-data.md)

Copy page

On this page

ON THIS PAGE

[Understanding GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23understanding-graphql)

[Installing the React Apollo library](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23installing-the-react-apollo-library)

[Making queries in GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23making-queries-in-graphql)

[Mutating in GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23mutating-in-graphql)

[Debugging queries and mutations in GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data/docs/guides/vtex-io-documentation-7-consuming-data%23debugging-queries-and-mutations-in-graphql)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtexarg speech to text in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/updates/release-notes)

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/updates/release-notes)

Speech to Text Search

The `speech-to-text` app uses Google Chrome language processing to listen to the user's microphone and convert speech-to-text. The recognized text is then used to redirect the user to the corresponding search page.

![{"base64":"  ","img":{"width":640,"height":308,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":3758010,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtexarg-speech-to-text-0.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtexarg-speech-to-text-0.gif)

## Configuration

1. Add the `vtexarg.speech-to-text` app to your theme's **peer dependency** in the `manifest.json` file.
2. Add the `text-speech` block to the desired theme template or inside another block. For example:

`1

 "flex-layout.col#text-speech": {

2

 "children": [

3

 "speech-to-text"

4

 ]

5

 },

`

1. Then, declare the `speech-to-text` block using the props stated in the [Props](#props) table. For example

`1

 "speech-to-text": {

2

 "props": {

3

 "lang": "es-ES",

4

 "iconHeight": "20px",

5

 "iconWidth": "20px",

6

 "imgSrc": "https://upload.wikimedia.org/wikipedia/commons/a/a7/Font_Awesome_5_solid_microphone.svg"

7

 }

8

 }

`

## Props

| Prop name  | Type   | Description                                 | Default value |
| ---------- | ------ | ------------------------------------------- | ------------- |
| lang       | enum   | Language used by the Google Chrome NLP API. | en-EN         |
| iconHeight | string | Icon height in px.                          | 20px          |
| iconWidth  | string | Icon width in px.                           | 20px          |
| imgSrc     | string | URL of the source image.                    | none          |

## Customization

To apply CSS customizations in this and other blocks, follow the [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles                  |
| ---------------------------- |
| audioSearchContainer         |
| audioSearchImg               |
| audioSearchImgRecordingState |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/pixel-apps/vtexarg-speech-to-text.md)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/guides/vtexarg-speech-to-text%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/guides/vtexarg-speech-to-text%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/guides/vtexarg-speech-to-text%23customization)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/pixel-apps/vtexarg-speech-to-text.md)

Copy page

On this page

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/guides/vtexarg-speech-to-text%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/guides/vtexarg-speech-to-text%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-speech-to-text/docs/guides/vtexarg-speech-to-text%23customization)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)