Installing the Sophiie Call Now

The Sophiie Call Now 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 Call Now script.
A <div> element where the component will be rendered.
A script to initialize and customize the component.

Here's the basic code structure:

<!-- Add the target element -->
<div id="sophiie-custom-target-call-frame"></div>

<!-- Load and initialize the component -->
<script>
  function _vf_load() {
    const targetElement = document.getElementById(
      "sophiie-custom-target-call-frame"
    );

    window.sophiie.call.load({
      orgId: "your-org-id", // Replace with your Organization ID
      render: {
        mode: "embedded",
        target: targetElement,
      },
      customization: {
        buttonVariant: "primary",
        buttonText: "Call Now",
      },
    });
  }
</script>
<script
  type="module"
  src="https://cdn.sophiie.ai/call/bundle.mjs"
  onload="_vf_load()"
></script>

Replace your-org-id with your actual organization ID.

Installation Methods

There are two ways to install the Sophiie Call Now: Standard Embed (recommended for most sites) and Iframe Embed (for platforms with JavaScript restrictions like Wix).

The standard embed loads the call widget bundle directly on your page. This is the recommended method for most websites.

<div id="sophiie-custom-target-call-frame"></div>

<script>
  function _vf_load() {
    const targetElement = document.getElementById(
      "sophiie-custom-target-call-frame"
    );

    window.sophiie.call.load({
      orgId: "your-org-id", // Replace with your Organization ID
      render: {
        mode: "embedded",
        target: targetElement,
      },
      customization: {
        buttonVariant: "primary",
        buttonText: "Call Now",
      },
    });
  }
</script>
<script
  type="module"
  src="https://cdn.sophiie.ai/call/bundle.mjs"
  onload="_vf_load()"
></script>

Some platforms (like Wix) lock down EventTarget.prototype.addEventListener, which prevents the standard call widget bundle from loading. The iframe embed solves this by running the call widget inside an isolated iframe.

Use iframe-embed.js instead of bundle.mjs:

<div id="sophiie-custom-target-call-frame"></div>

<script>
  function _vf_load() {
    const targetElement = document.getElementById(
      "sophiie-custom-target-call-frame"
    );

    window.sophiie.call.load({
      orgId: "your-org-id", // Replace with your Organization ID
      render: {
        mode: "dialog",
        target: targetElement,
      },
      customization: {
        buttonVariant: "primary",
        buttonText: "Call Now",
      },
    });
  }
</script>
<script
  src="https://cdn.sophiie.ai/call/iframe-embed.js"
  onload="_vf_load()"
></script>

The iframe embed supports the same configuration options and callback functions as the standard embed. Both embedded and dialog render modes are supported.

Wix Setup Steps

In the Sophiie dashboard, go to Settings → Apps → Call, switch to the Iframe tab, and copy the script
Open your Wix Editor
Click "Add Elements" (the + button)
In the sidebar, click "Embed Code"
Select "Embed HTML"
Paste the copied Iframe script into the HTML code box
Click "Update" and position the element on your page
Save and publish your site

HTML Website Installation

For a standard HTML website, add the following code where you want the component to appear:

<!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>

    <div id="sophiie-custom-target-call-frame"></div>

    <!-- Sophiie Call Now -->
    <script>
      function _vf_load() {
        const targetElement = document.getElementById(
          "sophiie-custom-target-call-frame"
        );

        window.sophiie.call.load({
          orgId: "your-org-id",
          render: {
            mode: "embedded",
            target: targetElement,
          },
          customization: {
            buttonVariant: "primary",
            buttonText: "Call Now",
            buttonClassName: "custom-button-class",
            withoutCard: false,
          },
        });
      }
    </script>
    <script
      type="module"
      src="https://cdn.sophiie.ai/call/bundle.mjs"
      onload="_vf_load()"
    ></script>
    <!-- End Sophiie Call Now -->
  </body>
</html>

WordPress Installation

For WordPress, you can add the Sophiie Call Now 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 component.
Add a new "Custom HTML" block.
Paste the following code into the block:

<div id="sophiie-custom-target-call-frame"></div>

<script>
  function _vf_load() {
    const targetElement = document.getElementById(
      "sophiie-custom-target-call-frame"
    );

    window.sophiie.call.load({
      orgId: "your-org-id",
      render: {
        mode: "embedded",
        target: targetElement,
      },
      customization: {
        buttonVariant: "primary",
        buttonText: "Call Now",
      },
    });
  }
</script>
<script
  type="module"
  src="https://cdn.sophiie.ai/call/bundle.mjs"
  onload="_vf_load()"
></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:

<div id="sophiie-custom-target-call-frame"></div>

<script>
  function _vf_load() {
    const targetElement = document.getElementById(
      "sophiie-custom-target-call-frame"
    );

    window.sophiie.call.load({
      orgId: "<?php echo esc_js(get_option('sophiie_org_id')); ?>",
      render: {
        mode: "embedded",
        target: targetElement,
      },
      customization: {
        buttonVariant: "primary",
        buttonText: "Call Now",
      },
    });
  }
</script>
<script
  type="module"
  src="https://cdn.sophiie.ai/call/bundle.mjs"
  onload="_vf_load()"
></script>

Save the file.

Basic Configuration Options

The Sophiie Call Now component supports the following configuration options:

orgId: Your organization ID (required)
render.mode: Rendering mode ('embedded' or 'dialog')
render.target: Target element for rendering
customization.buttonVariant: Button style variant ('primary', 'secondary', or 'success')
customization.buttonText: Button display text
customization.buttonClassName: Additional CSS class for both buttons (deprecated, use the specific options below)
customization.dialogButtonClassName: Additional CSS class for the dialog trigger button (applies only to dialog mode)
customization.formButtonClassName: Additional CSS class for the form submit button
customization.dialogButtonStyle: Inline CSS styles for the dialog trigger button, e.g. "color: red; padding: 20px;" (applies only to dialog mode)
customization.formButtonStyle: Inline CSS styles for the form submit button, e.g. "background: green;"
customization.withoutCard: Whether to render without card styling (applies only to embedded mode, default: false)
customization.withoutFooter: Whether to hide the footer (default: false)
customization.dialogTitle: Title text shown in the dialog (applies only to dialog mode, default: "Receive a phone call from Sophiie now!")

Call Status Handling

The component provides callback functions that allow you to subscribe to call events and implement custom logic. Here are the available callbacks and their purposes:

onCallInitiated: Triggered when a call attempt is made
onCallStatus: Provides real-time updates about the call's status
onCallComplete: Triggered when the call ends
onCallError: Triggerred when an error occurred

window.sophiie.call.load({
  // ...basic configuration

  // Optional: Triggered when a call attempt is made
  onCallInitiated: (status, message) => {
    console.log(`Call initiated: ${message}`);
  },

  // Optional: Provides real-time updates about call status
  // Possible values:
  // - ringing: The call is ringing and waiting to be answered
  // - in-progress: The call has been answered and is ongoing
  // - no-answer: The call was not answered within the timeout period
  // - unauthorized-geo: The call cannot be placed due to geographic restrictions
  onCallStatus: (status) => {
    switch(status) {
      case "ringing":
        console.log("Call is ringing");
        break;
      case "in-progress":
        console.log("Call is in progress");
        break;
      case "no-answer":
        console.log("Call was not answered");
        break;
      case "unauthorized-geo":
        console.log("Call cannot be placed due to geographic restrictions");
        break;
    }
  },

  // Optional: Triggered when the call ends
  onCallComplete: () => {
    console.log("Call completed");
  },

  // Optional: Triggerred when error happened
  onCallError: (error_message) => {
    console.log(`Error occurred: ${error_message}`)
  }

  // Optional: Disable default alert messages if you want to implement your own alert logic
  disableAlert: true,
});

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

Sophiie Call Now App