BAYLINE / OFFERS STUDIO

Download Markdown · Print this page to save a PDF.

On this page1. Open the studio2. Understand what is saved3. Create a shop and its first offer4. Customize the design and copy5. Upload the shop’s photos and logo6. Connect the shop’s GoHighLevel form7. Connect the master Meta pixel8. Build the ad destination URL9. Preview and test before launch10. Publish11. Edit an existing live page12. Add another offer or template13. Backups and local editing14. Troubleshooting

Bayline Offers Studio — start-to-finish guide

1. Open the studio

Your builder is at https://offers.baylinegrowth.com/studio.

For first access, open the private setup link in HANDOFF-ACCESS.md in the project folder. Create a password with at least 12 characters and save it in your password manager. The setup link expires after seven days and stops working once a password exists. After that, sign in at /studio. A session lasts 12 hours.

This is an agency-admin workspace with one shared administrator password, not a client portal with separate user accounts. Share draft preview links with clients. Do not give clients the studio password. Anyone with that password can edit all shops. Change it under Agency settings → Change studio password. Existing sessions last until their 12-hour expiry; rotate STUDIO_SESSION_SECRET in Vercel and redeploy if you need to invalidate all sessions immediately.

2. Understand what is saved

Each shop has an address such as luxotic-customs. Each offer has another address such as ceramic-coating. Together they create:

https://offers.baylinegrowth.com/luxotic-customs/ceramic-coating

Each offer contains its own colours, copy, photos, form, tracking switches, draft, published snapshot, and version history. Saving a draft does not change the live page. Publishing freezes a copy of the saved draft for visitors. Other offers keep their published versions.

Shop identity is represented by the shop address. Brand settings are copied when you create another offer from the current one; later brand edits are per-offer, so changing one offer does not silently change the others.

3. Create a shop and its first offer

  1. Click + New shop in the left column.
  2. Enter the real shop name. The studio suggests a lowercase address with hyphens.
  3. Check the shop address. For Luxotic Customs, use luxotic-customs.
  4. Enter the offer address, usually ceramic-coating.
  5. Choose Generic ceramic coating master or one of your saved templates.
  6. Click Create draft.
  7. Check the displayed URL. Addresses lock after the first save. To create another address, duplicate the offer rather than changing an address used in ads.

The generic master deliberately contains {curly_bracket_fields}. Fill them with this shop’s approved information. They remain editable inside the studio. The publisher checks the final visible page for unfinished placeholders.

4. Customize the design and copy

Use Brand & copy:

  1. Set the shop name and six brand colours. Accent is the button/highlight colour; accent text is the text on those buttons. Check that the pair is readable.
  2. Turn optional reviews, bonuses, warranty, and gallery sections on or off.
  3. Complete Fill shared placeholders once near the top of Brand & copy. Details such as GST wording are reused wherever that token appears. Then open Shop & contact and enter the city, service area, address, phone, opening hours, privacy URL, and terms URL.
  4. Open Hero & call to action and edit the headline, supporting text, CTA, trust strip, and hero photo.
  5. Open Offer & package and fill in the price, currency, tax treatment, inclusions, value comparison, bonuses, availability, and exclusions.
  6. Complete form copy, reviews, process, warranty, next steps, FAQs, closing copy, and metadata.
  7. Remove promises, proof, prices, and conditions inherited from another client unless this shop approves them.
  8. Check both Desktop and Mobile previews. The main font is Helvetica with system fallbacks; no external font download is required.
  9. Click Save draft.

All section headings, process labels, and offer text are editable. Advanced styling is available under Custom styling → Additional CSS. That CSS applies only to this offer. Edit layout carefully and check mobile again. The page template’s HTML structure remains shared source code; the studio is a settings-and-preview editor, not an unrestricted drag-and-drop HTML editor.

Changing a price does not automatically rewrite every mention of that price. Review the hero, package, FAQs, and closing copy together.

  1. Find the image field under the appropriate group.
  2. Click Upload image and choose a JPG, PNG, WebP, or AVIF.
  3. The studio resizes and compresses it to WebP. Large uploads are reduced before transmission and metadata is stripped during server processing.
  4. Update the image description and caption so they accurately describe the photo.
  5. Click Save draft.

Uploading the hero image updates the mobile hero field too. You can upload a different crop to Hero image mobile afterward. Use real shop work and approved photos. Transparent PNG logos keep transparency in WebP. Uploaded images are served at unguessable content-hash URLs but are public to anyone who has that URL; never upload private customer documents or credentials.

6. Connect the shop’s GoHighLevel form

  1. Open the correct shop’s GHL sub-account.
  2. Create or select the landing-page form. Keep it short: name, phone/email, vehicle year/make/model, and the key qualification question you actually need.
  3. Add the shop’s approved contact-consent language and privacy link.
  4. Copy the complete form embed from GHL.
  5. In the studio, open Form & tracking and paste it into Complete form embed code.
  6. Copy the studio’s GHL redirect after successful submission URL.
  7. In GHL, set successful submission to redirect to that URL. Configure it to navigate the full browser page, not just the embedded iframe.
  8. Connect the form to the correct workflow, opportunity pipeline, owner, and notifications inside that same sub-account.
  9. Save the form in GHL and Save draft in the studio.

Each offer must use its own correct shop routing. A form embed does not automatically create a GHL workflow or pipeline. Those remain GHL settings.

7. Connect the master Meta pixel

One-time agency setup:

  1. In Meta Events Manager, create or choose the agency’s intended dataset/pixel.
  2. Copy its numeric Pixel ID.
  3. In the studio, open Agency settings and paste it into Master Meta pixel ID. Save.
  4. Where Meta requests domain verification, use the exact verification method Meta supplies. For this shared-domain setup, prefer a DNS TXT record for baylinegrowth.com in GoDaddy: the main website is hosted separately. Copy Meta’s exact record into a new TXT record, save, and click Verify in Meta. Do not replace existing TXT/email records. The studio’s optional HTML verification field adds a token to offer pages; it does not change the main baylinegrowth.com website or by itself prove that Meta verified the parent domain.
  5. Give the relevant client ad accounts access to that dataset through Meta Business Settings. Confirm the dataset appears as a selectable asset in each client’s ad account.

Per offer:

  1. Open Form & tracking.
  2. Turn on Enable tracking on this offer.
  3. Leave Override pixel ID blank to inherit the agency pixel, or enter a client-specific ID if required.
  4. Keep Ask before loading marketing cookies on unless the shop has approved another consent implementation. Page content and the GHL form remain usable when marketing cookies are declined. Visitors can reopen the preference prompt using Cookie settings at the bottom of the page. This control gates the studio’s pixel; it cannot prevent tracking already configured inside a GHL iframe or pasted embed.
  5. Choose one Lead event source: Studio confirmation page or GoHighLevel only.
  6. Save and test before publishing. Changes to agency settings reach already-live pages only when those offers are republished. A rollback restores the tracking configuration captured in that historical publication.

Use Studio confirmation page and turn off any duplicate Lead event in the GHL form. The studio sends PageView after tracking consent. It sends Lead on /thank-you?submitted=1 only when this browser visited the corresponding offer in the previous 30 minutes. It stores the event ID in session storage to prevent reloads from generating another Lead for that visit.

A fresh direct visit to the confirmation URL does not count as a Lead. This browser check is a guard against accidental counts, not server-side proof of form submission: a visitor who viewed the offer could manually navigate to its confirmation URL. Cookie blockers, declined consent, disabled storage, a different browser, or a different tab can prevent browser tracking. Use GHL form submissions as the CRM source of truth.

The event includes shop_slug, offer_slug, and content_name identifying the shop and offer. No contact names, phone numbers, emails, or form answers are sent by this tracking script. Offer price is not sent as lead revenue.

For GHL-managed Lead tracking or Conversions API, choose GoHighLevel only so the studio does not also send Lead. Configure and verify those events in GHL. Server-side CAPI is not supplied by the studio. If you later send the same event from browser and server, use matching event_name and event_id to deduplicate. Do not assume separate event sources deduplicate automatically.

Keep client reporting separate

Because several shops share a pixel, do not optimize each campaign against a pooled count without checking the setup. Create a shop-specific custom conversion using the Lead event and the confirmation-page URL containing:

/luxotic-customs/ceramic-coating/thank-you

Use the corresponding rule for each shop and offer. This URL rule applies to studio confirmation-page Lead events. For GHL/CAPI events, inspect the actual event_source_url and supported parameters in Test Events, then build a rule that matches those events; do not assume a GHL event reports the studio’s confirmation address. Where Meta allows the custom conversion as an optimization event, select that conversion for this campaign; confirm it is available to the client’s ad account. If it is not available, resolve the asset setup before launch, or use a client-specific dataset. Verify both Meta’s reported conversions and matched CRM submissions. A shared pixel does not guarantee that all shops automatically benefit from one unified learning process.

8. Build the ad destination URL

  1. Under Form & tracking → Ad URL builder, enter a clear campaign name.
  2. Enter the creative/ad name if useful.
  3. Click Copy ad URL.
  4. Use that address as the website destination in Meta.

The builder supplies utm_source=facebook, utm_medium=paid_social, utm_campaign, and optional utm_content. Change the source parameter if using Instagram-specific or another-channel reporting.

The page remembers those UTMs for this shop and offer within the browser session and forwards them to the embedded GHL form URL, together with shop_slug, offer_slug, and landing_page. Create and map the corresponding hidden fields in GHL and confirm a test contact contains them. Forwarding query parameters alone is not proof that GHL stored them. Automatic fbclid/fbp/fbc capture or CAPI identity matching is not part of this studio.

Never put customer names, emails, phone numbers, or sensitive form answers in an ad URL.

9. Preview and test before launch

Design preview: shows draft changes immediately; scripts and embedded forms are disabled.

Create preview link: save the draft, then use Launch → Create preview link. The link is valid for seven days, requires no client login, and shows the latest saved draft. It is a design/offer review, not a form test. It is excluded from indexing. Anyone who receives the link can view the draft during its validity.

Open working test page: under Launch, opens an authenticated page using your saved draft. Forms and tracking are enabled. For a complete prelaunch submission test:

  1. Save the draft and open the working test page while signed in.
  2. Temporarily set GHL’s successful-submission redirect to https://offers.baylinegrowth.com/test/SHOP/OFFER/thank-you?submitted=1.
  3. Open Meta Test Events and use the test page there. Keep your studio login in the same browser.
  4. Use an approved internal test contact whose recipient details you control. Do not enroll a real customer as a test.
  5. Submit the form and verify the CRM contact, custom fields, attribution, opportunity, workflow, and expected sender/routing.
  6. Verify the redirect opens the complete confirmation page and the expected Lead event arrives once.
  7. Refresh the confirmation page: no second Lead should fire for that visit.
  8. Restore GHL’s redirect to the final public URL shown in the studio.
  9. Remove or clearly label the test contact according to your CRM process.

Do not mark a test as passed without observing it. The studio’s checkboxes record your confirmation; they do not query Meta or GHL to certify the result.

10. Publish

  1. Open Launch and complete the checklist after performing the checks.
  2. Click Save draft.
  3. Read the remaining issues. Finish visible curly placeholders, valid privacy/terms addresses, the form, and required checks.
  4. Click Publish this offer and confirm the selected shop/offer.
  5. Open the live URL in a signed-out browser.
  6. Allow up to 60 seconds for edge caches to refresh.
  7. Perform the final live form/CRM/Meta check before running ads.

The published HTML and confirmation page are saved snapshots and served through Vercel with a 60-second CDN cache. The builder does not run in visitors’ browsers. The first request after a cache miss reads the private published record; this is cached delivery of generated HTML, not a per-client Vercel rebuild. The GHL embed and enabled pixel remain third-party dependencies whose load time varies.

11. Edit an existing live page

  1. Select the shop and offer in the left column.
  2. Change copy, colours, images, sections, form, or tracking.
  3. Save the draft and review it.
  4. Repeat relevant tests if price, routing, form, tracking, or page layout changed.
  5. Publish when ready. The URL stays the same.

Restore selected live version changes the public page to the chosen saved publication and preserves the current draft. Load live copy into draft copies the current live configuration into the editor; save it afterward if you want to keep that draft. Take this offer offline preserves the draft and history but returns an unavailable page at the public URL. Pause its ads first. Cache expiry can take up to 60 seconds.

12. Add another offer or template

+ New offer for this shop lets you choose the generic master, a saved template, or the current offer. Copied content remains editable. Forms, launch checks, and tracking are reset to avoid accidentally launching another client’s integration.

Duplicate lets you create a copy with a new shop or offer address. Review every inherited client claim and photo.

Save this design as a template adds a named reusable design to the creation dialog. It includes colours, copy, photos, custom CSS, and sections. It clears the GHL embed, tracking activation, and launch checks. To replace a saved template, save again under the same name. Existing offers do not change when a template is updated.

13. Backups and local editing

Export settings downloads the current offer configuration. Import settings loads one offer configuration into the current editor and clears launch confirmations; it does not publish. Check the shop address before saving.

Back up studio downloads all offer records, publication history metadata, templates, and shared settings. Uploaded image bytes and older immutable version files are stored separately in Vercel Blob; the JSON is not a complete disaster-recovery archive. Keep Vercel storage intact. Export each offer for portable local editing. Only the most recent 30 publications appear in the studio history; older immutable files remain in storage.

The original local editor remains at http://127.0.0.1:4173/editor.html when npm start is running. It saves its local client.json and static dist output. Those local saves do not update the cloud studio. Import exported settings into the hosted studio to apply them there. /media URLs from cloud uploads require the hosted site; download those images if preparing an entirely offline copy.

14. Troubleshooting