Klaviyo form id as env variable

.env.example

@@ -37,3 +37,4 @@ NEXT_PUBLIC_DEFAULT_REVALIDATE_TARGET=3600
 
 # Klaviyo Public Key can be found in your Account API Keys: https://www.klaviyo.com/settings/account/api-keys
 NEXT_PUBLIC_KLAVIYO_PUBLIC_KEY=YourPublicKey
+NEXT_PUBLIC_KLAVIYO_FORM_ID=YourFormID

README.md

@@ -14,13 +14,16 @@ git clone [email protected]:bigcommerce-labs/catalyst-klaviyo.git && cd catalyst-kl
 pnpm create @bigcommerce/catalyst@latest init
 ```
 
-3. The `.env.local` file created by the `init` command above will not create the `NEXT_PUBLIC_KLAVIYO_PUBLIC_KEY` variable, so we'll need to add that. To create a public key, [install and configure the Klaviyo application for BigCommerce](https://help.klaviyo.com/hc/en-us/articles/115005082547). 
+3. The `.env.local` file created by the `init` command above will not create the `NEXT_PUBLIC_KLAVIYO_PUBLIC_KEY` or `NEXT_PUBLIC_KLAVIYO_FORM_ID` variables, so we'll need to add them. To create a public key, [install and configure the Klaviyo application for BigCommerce](https://help.klaviyo.com/hc/en-us/articles/115005082547).
 
 > [!NOTE]
 > For Step 5 in the Klaviyo help article above, you most likely want to uncheck the **Onsite Tracking** box; onsite tracking scripts are taken care of for you by the files contained in the `integrations/klaviyo` directory at the root of this repository.
 
-4. Now that your Klaviyo account is linked to your BigCommerce store, grab your Klaviyo Public Key from your Klaviyo account: [https://www.klaviyo.com/settings/account/api-keys](https://www.klaviyo.com/settings/account/api-keys), and then run the command below replacing `YOUR_PUBLIC_KEY` with the value retrieved from your account
+4. Now that your Klaviyo account is linked to your BigCommerce store, grab your Klaviyo Public Key from your Klaviyo account: [https://www.klaviyo.com/settings/account/api-keys](https://www.klaviyo.com/settings/account/api-keys), and then run the command below replacing `YOUR_PUBLIC_KEY` with the value retrieved from your account.
+
+5. To fetch your form ID, follow the instructions in the Klaviyo help article [here](https://help.klaviyo.com/hc/en-us/articles/360006897412#01H7ZC0C6Q5HPPB0DQKTNBHGRX). Once you have your form ID, run the command below replacing `YOUR_FORM_ID` with the value retrieved from your account.
 
 ```bash
 echo "\nNEXT_PUBLIC_KLAVIYO_PUBLIC_KEY=YOUR_PUBLIC_KEY" >> .env.local
+echo "\nNEXT_PUBLIC_KLAVIYO_FORM_ID=YOUR_FORM_ID" >> .env.local
 ```

app/[locale]/(default)/page.tsx

@@ -14,6 +14,8 @@ interface Props {
 }
 
 export default async function Home({ params: { locale } }: Props) {
+  const klaviyoFormID = process.env.NEXT_PUBLIC_KLAVIYO_FORM_ID ?? '';
+
   unstable_setRequestLocale(locale);
 
   const t = await getTranslations({ locale, namespace: 'Home' });
@@ -30,7 +32,7 @@ export default async function Home({ params: { locale } }: Props) {
       <div className="my-10">
         <NextIntlClientProvider locale={locale} messages={{ Product: messages.Product ?? {} }}>
           {/* Klaviyo Embed Form */}
-          <div className="klaviyo-form-VXCJF7" />
+          <div className={`klaviyo-form-${klaviyoFormID}`} />
 
           <ProductCardCarousel
             products={featuredProducts}