Installing the Sophiie Webform App

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

General Installation Steps

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

A script tag to load the Sophiie Webform app script
A <div> element with the data-sophiie-webform attribute
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".

HTML Website Installation

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>

WordPress Installation

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

Using a Custom HTML Block (Easiest Method)

Edit the page or post where you want to add the button
Add a new "Custom HTML" block
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>

Update or publish your page

Editing Theme Files (Advanced Method)

If you want the button to appear on all pages:

Access your WordPress theme files
Edit the footer.php file
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>

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.

Customization

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.

For any issues or advanced customization needs, please refer to our documentation or contact our support team.

Sophiie Webform App