Skip to content
Submit a Support Ticket
  • There are no suggestions because the search field is empty.

Sophiie's Webform Feature

How to install the Sophiie Webform App on your website.

The Sophiie Webform App can be easily integrated into various platforms. This guide covers installation for HTML websites, Wix, and WordPress.

Regardless of the platform, you'll need to include the following elements:

  1. A script tag to load the Sophiie Webform app script

  2. A <div> element with the data-sophiie-webform attribute

  3. A script to customize and initialize the app

Here's the basic code structure:

<!-- Load the script from the CDN -->
<script src="https://cdn.sophiie.ai/webform/btn.js"></script>

<!-- Add the target element -->
<div data-sophiie-webform></div>

<!-- Call the customization function after the script has loaded -->
<script>
  sophiie.webform.btn({
    webformId: "${webformId}",
    buttonText: "${buttonText}",
    variant: "${variant}",
  });
</script>

Replace ${webformId} with your actual webform ID, ${buttonText} with your desired button text, and ${variant} with either "primary" or "secondary".

For a standard HTML website, simply add the code above to your HTML file where you want the button to appear. For example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>

    <!-- Sophiie Webform Button -->
    <script src="https://cdn.sophiie.ai/webform/btn.js"></script>
    <div data-sophiie-webform></div>
    <script>
      sophiie.webform.btn({
        webformId: "your-webform-id",
        buttonText: "Open Webform",
        variant: "primary",
      });
    </script>
    <!-- End Sophiie Webform Button -->
  </body>
</html>

To add the Sophiie Webform button to your Wix site:

  1. Go to your Wix Editor

  2. Add a new "Custom Element" to your page

  3. Click on "Settings" for the Custom Element

  4. In the "Custom Code" section, paste the following code:

<script src="https://cdn.sophiie.ai/webform/btn.js"></script>
<div data-sophiie-webform></div>
<script>
  sophiie.webform.btn({
    webformId: "your-webform-id",
    buttonText: "Open Webform",
    variant: "secondary",
  });
</script>

  1. Click "Apply" to save the changes

For WordPress, you can add the Sophiie Webform button using a custom HTML block or by editing your theme files:

  1. Edit the page or post where you want to add the button

  2. Add a new "Custom HTML" block

  3. Paste the following code into the block:

<script src="https://cdn.sophiie.ai/webform/btn.js"></script>
<div data-sophiie-webform></div>
<script>
  sophiie.webform.btn({
    webformId: "your-webform-id",
    buttonText: "Open Webform",
    variant: "primary",
  });
</script>

  1. Update or publish your page

If you want the button to appear on all pages:

  1. Access your WordPress theme files

  2. Edit the footer.php file

  3. Add the following code just before the closing </body> tag:

<script src="https://cdn.sophiie.ai/webform/btn.js"></script>
<div data-sophiie-webform></div>
<script>
  sophiie.webform.btn({
    webformId: "<?php echo esc_js(get_option('sophiie_webform_id')); ?>",
    buttonText: "Open Webform",
    variant: "secondary",
  });
</script>

  1. Save the file

Note: For the advanced method, you may want to create a WordPress plugin or use a child theme to ensure your changes aren't overwritten during theme updates.

You can customize the button's appearance and behavior by modifying the options in the sophiie.webform.btn() function. The most important options are:

  • webformId: Your unique webform identifier (required)

  • buttonText: The text displayed on the button (default: "Open Webform")

  • variant: The button style, either "primary" or "secondary" (default: "primary")

  • styles: An object containing custom CSS styles for the button

Example with custom options:

sophiie.webform.btn({
  webformId: "your-webform-id",
  buttonText: "Start Survey",
  variant: "secondary",
  styles: {
    backgroundColor: "#4CAF50",
    color: "white",
    padding: "10px 20px",
    borderRadius: "5px",
    fontSize: "16px",
  },
});

The styles object allows you to apply custom CSS properties directly to the button. This gives you fine-grained control over the button's appearance, allowing you to match it perfectly with your website's design.

Some common properties you might want to customize include:

  • backgroundColor: The button's background color

  • color: The text color

  • padding: The internal spacing of the button

  • borderRadius: The roundness of the button's corners

  • fontSize: The size of the button text

  • fontWeight: The boldness of the button text

  • boxShadow: Add a shadow effect to the button

Remember that these styles will override the default styles provided by the variant option. If you want to keep some aspects of the variant styling, you may need to inspect the default styles and include the properties you want to keep in your styles object.