FAQs and Troubleshooting

• Cloudflare
• Vercel
• Heroku
• Supabase
• Firebase
• Clickhouse

• Better performance and faster load times
• Seamless integration with your page’s styling
• No cross-origin restrictions
• Better SEO as content is part of your page
• Easier data passing between your site and the Embeddable
• Better support for Stripe payments, since Stripe uses its own iframes (avoiding nested iframes)

1. Open the Builder for your Embeddable
2. Press ESC to deselect any components (so nothing is selected)
3. In the Options sidebar, click the three dots menu (⋮) in the top right corner
4. Click “Edit JSON” to open the JSON editor modal
5. Use the search inside the code editor box (Cmd+F or Ctrl+F with the code editor in focus) to search for the key name within the JSON

• Input fields and form components that create the key
• Actions that update the key
• Computed Fields that are set with their key as the key you’re looking for, or that reference the key
• Conditions that use the key

1. Add a container to the page if it does not already exist.
2. For each component that you want to align horizontally, move it into the container.
3. Select the container, and in the Designer sidebar, set the display property to flex.
4. Ensure the flex direction is set to row (this is usually the default).

1. Select the container that includes ONLY the button (or create one if it doesn’t exist).
2. In the Designer sidebar, set the container's width to 100%.
3. Set the display property of the container to flex.
4. Ensure the flex direction is set to row (this is usually the default).

1. Select the component you want to style.
2. In the Designer sidebar, look for the “On” dropdown.
3. Choose the specific screen size you want to style for:
   • Mobile: up to 520px width
   • Tablet: 521px to 720px width
   • Desktop: 721px width and above
4. Apply your styles while that screen size is selected - this will set the styles for only that screen size and smaller screen sizes.

• Mobile: Shows layout for devices with width up to 520px.
• Tablet: Shows layout for devices with width between 521px and 720px.
• Desktop: Shows layout for devices with width of 721px and above.

• Desktop styles (721px+) apply to desktop, tablet, and mobile
• Tablet styles (521px-720px) apply to tablet and mobile
• Mobile styles (up to 520px) apply only to mobile

1. Select the component that has unwanted styles on mobile
2. Switch to Mobile view using the “On” dropdown in the Designer sidebar
3. Override the problematic styles by setting different values for mobile

• Desktop: width = 300px
• Mobile: width = 100%

• Whole thing: Apply styles to the entire button (background, border, etc.).
• Text Wrapper: Style the container that holds the button’s text.
• Text: Style the text itself (font, color, size, etc.).
• Description: Style any description text (if present).
• Icon: Style the icon (if present).
• Image: Style any image within the button (if present).

• Global CSS styles on your page are overriding the Embeddable’s styles
• Margin or padding applied to elements inside the Embeddable (e.g., body margins preventing edge-to-edge display)
• Font styles or other inherited CSS properties from your page
• CSS reset or normalize stylesheets affecting the Embeddable’s layout

1. Inspect the Embeddable on your website using browser developer tools (right-click → Inspect)
2. Look for conflicting styles that are being applied from your website’s CSS
3. Override the conflicting styles by adding more specific CSS rules to your page:

/* Example: Remove body margin affecting the Embeddable */
.embeddables-container body {
  margin: 0;
}

/* Example: Reset specific styles for the Embeddable */
.embeddables-container * {
  box-sizing: border-box;
}

4. Test the changes to ensure the Embeddable displays correctly

1. Select the button you want to configure.
2. In the button settings, find the Validation section.
3. Look for the option “React if page requirements not met”.
4. Set it to “Disable”.

1. Add a regular Input component.
2. In the Options tab, set the Input Type to Phone.

1. Under the Validation section, check Validate value.
2. Set Formula to Phone Number (US) or Custom formula.
3. If you choose Phone Number (US), the phone number will be automatically formatted as (xxx) xxx-xxxx.
4. If you choose Custom formula, you can use the something like the following formula to validate the phone number:

function validate(value) {
  return /^[\d\s\(\)\-]+$/.test(value);
}

​

Option 1: Use the built-in US phone validation (Recommended)

1. Set the Input component’s Input Type to Phone
2. In the Validation section, check Validate value
3. Set the Formula to Phone Number (US)

• Formats the number as (xxx) xxx-xxxx as the user types
• Validates the format is correct
• Provides a consistent user experience
• Handles edge cases and formatting automatically

​

Option 2: Custom validation with regex

1. Set the Input component’s Input Type to Phone
2. In the Validation section, check Validate value
3. Set the Formula to Custom formula
4. Write a custom function to validate the phone number, for example:

function validate(value) {
  return /^[\d\s\(\)\-]+$/.test(value);
}

​

Option 3: Remove disallowed characters immediately on type, using a custom action

function output(_, { setUserData }) {
  const input = document.querySelector(".ComponentKey-phone input");
  if (!input) return;

  input.setAttribute("inputmode", "numeric");

  input.addEventListener("input", (e) => {
    let value = e.target.value;
    let digits = value.replace(/\D/g, '');

    if (digits.length > 10) {
      digits = digits.slice(0, 10);
    }

    // Remove letters but keep formatting characters
    value = value.replace(/[A-Za-z]/g, '');
    e.target.value = value;
  });
}

1. Open the Version Control card in the Builder sidebar.
2. Find the version you want to roll back to in the version history list.
3. Click on that version to load it in the Builder.
4. Make a small edit (the Save button won’t be active until you make a change).
5. Click Save - this creates a new version based on the old one.

1. Click on Version Control in the top bar of the Builder.
2. Go to the Logs tab.
3. This shows an audit trail of staging and production deployments.

1. Open Version Control in the Builder Top Bar.
2. Click the <> icon (compare icon) in Version Control.
3. Select the two versions you want to compare.

1. Users page
   • Shows individual user sessions.
   • You can click on a user to see their activity and their submission data for each Embeddable.
2. Embeddable —> Submissions tab
   • Shows the User Data for completed form submissions.
   • Each user will have a separate row for each Embeddable they have interacted with, meaning there could be multiple rows for the same user.
   • All users from all stages of the funnel are included, so the majority of rows will likely correspond to users who did not reach the end of the funnel.

1. Go to your funnel dashboard.
2. Look for the “Data collected in production version” button.
3. Click it to toggle between:
   • Production data only
   • All data (including both production and test data)

1. In the Builder, select nothing (press ESC) to see the Options tab for the Entire Embeddable settings.
2. Go to the Options tab and find the URL Keys section.
3. Add the UTM parameters you want to capture (e.g., utm_source, utm_campaign, utm_medium) - add one on each line.
4. These values will automatically be stored in UserData when users visit your page.

function output(userData) {
  // Get UTM parameters from the URL
  const params = new URLSearchParams(window.location.search);
  const utmSource = params.get("utm_source");
  const utmCampaign = params.get("utm_campaign");
  const utmMedium = params.get("utm_medium");

  // Store in UserData or use as needed
  return {
    utm_source: utmSource,
    utm_campaign: utmCampaign,
    utm_medium: utmMedium
  };
}

• Your workspace has HIPAA Compliance enabled, which restricts access to personally identifiable information (PII) and protected health information (PHI).
• Your account has Anonymized Data Access, which means you can only view anonymized data—personally identifiable information about end-users is hidden.
• Email addresses are classified as contact information and PII, so they are not visible to users with Anonymized Data Access.

1. Going to Settings → Team tab
2. Finding your user in the table
3. Changing your Data Access Level to Full Data Access

• User Roles & Permissions
• HIPAA Compliance