FAQs and Troubleshooting

Common questions, solutions to issues, and troubleshooting tips

The Embeddables Platform

Compliance & Security

Are you HIPAA compliant?

Yes, we are HIPAA compliant. However, customers need to follow our HIPAA compliance checklists and requirements to maintain compliance.

Are you SOC2 compliant?

No, we are not SOC2 compliant at this time.

Do you sign BAAs (Business Associate Agreements)?

No, we do not sign BAAs.

Data Processing & Privacy

Do you process or store personal data?

Our platform is used to build and embed frontend components. These components are then embedded or hosted on your website.

The amount of data we process depends on your preferences. If you want to use our platform’s analytics features, then our platform collects data from your end-users such as IP addresses, browser information, and page views.

If you don’t want to use our platform’s analytics features, then we don’t need to collect, process, or store any personal end-user data.

You can choose instead to collect and store data through your own backend. You can send directly from the user’s browser to your designated backend without it passing through our infrastructure.

Do you provide DPAs (Data Processing Agreements)?

Customers on our Pro and Enterprise plans can request us to review and sign a DPA.

For customers on lower plans, if you require a DPA with any vendors who process personal data, then we recommend that you send data directly from the user’s browser to your backend, without passing through our infrastructure (which would disable most of Embeddables’ built-in analytics features).

Do you conduct DPIAs (Data Protection Impact Assessments)?

We do not currently have a DPIA.

Infrastructure & Hosting

Where is your code/platform hosted?

Our platform is hosted on the following providers:

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

Our codebase itself is hosted on GitHub.

Building with Embeddables

Design, Styling, and Layouts

How do I place components side by side?

To place components side by side (horizontally), first those components need to be inside a container.

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).

If components are still stacking vertically, check that the container does not have flex-direction: column set.

How do I center a button in my design?

When you want to center a button horizontally on your page, place the button inside a container and use flexbox to center it.

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).

How do I edit styles for specific screen sizes?

To apply different styles for mobile, tablet, and desktop:

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.

What do the device screen type options (Desktop/Mobile/Tablet) do?

The device screen type options in the builder allow you to preview how your content will appear on different 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.

These are preview modes that help you see how your design will look on different devices. To actually edit styles for specific screen sizes, use the “On” dropdown in the Designer sidebar. You can also use the “On” dropdown to preview how your design will look on different screen sizes.

Why do my desktop styles affect mobile too?

In our builder, styles cascade downward from larger screens to smaller screens, similar to how CSS works. This means:

• 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

This design choice was made based on feedback because most Embeddables users design for desktop first, then adapt for smaller screens.

To fix unwanted style inheritance:

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

Example: If you set a width of 300px on desktop but want full width on mobile:

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

What are the different button elements I can style?

Button components contain several elements you can style individually:

• 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).

The available elements depend on what content your button contains. For a simple text button, you’ll primarily use “Whole thing”, “Text Wrapper”, and “Text”.

Form Elements

How do I reference multiple form elements in computed fields?

To access multiple form element values in a computed field, you can pull the keys of each input component from the first argument of the function.

Basic

// Computed Field: full_name
function result(userData) {
  return `${userData.first_name} ${userData.last_name}`;
}

The computed field receives a single object containing all your form element results. Make sure the property names in the destructuring match exactly with your form element names.

How do I add a phone number input field?

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

Optional: To validate the phone number:

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);
}

This formula will allow numbers, parentheses, spaces, and dashes.

Can I prevent users from entering text in a phone input field?

Yes, there are several approaches to restrict phone input to numbers only:

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

The simplest and most reliable approach is to use the built-in phone validation:

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)

This automatically:

• 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

The built-in validation is the most reliable option and handles all US phone number formats automatically.

Option 2: Custom validation with regex

For more control over the validation rules, you can use a custom formula:

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);
}

Custom validation gives you more control but requires more testing and maintenance. The built-in option is recommended for most use cases.

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

Create an action that runs on page load to restrict input to numeric characters only:

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;
  });
}

Using custom actions to restrict input may interfere with the automatic phone number formatting. The built-in phone validation is simpler and more reliable.

Does the phone input automatically format numbers?

Yes! When you set an Input component’s type to Phone, and choose Phone Number (US) for validation, it automatically formats the number as (xxx) xxx-xxxx as the user types.

This provides a better user experience and ensures consistent formatting across all submissions.

The automatic validation won’t prevent users from entering text, but it will prevent them from submitting the form if the phone number is invalid, showing them a validation error message.

Data & Analytics

How do I find my funnel submissions data?

Your users’ data can be found in two places:

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.

How do I access production data vs. test data?

To switch between viewing production data vs viewing all data (including test data):

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)

How do I capture UTM parameters and campaign IDs from incoming links?

You can capture UTM parameters and campaign IDs from incoming links in two ways:

Method 1: Using URL Keys (Recommended)

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.

Method 2: Using Custom Code Create an Action with custom code, and set up a Trigger that executes the Action when the Embeddable is loaded:

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
  };
}

The URL Keys method is simpler and automatically handles the capture. Use custom code when you need more complex logic or want to process the UTM parameters before storing them.