Sophiie's Website Call Now Button Integration

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.

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>

Wix Installation

To add the Sophiie Call Now to your Wix site:

Go to your Wix Editor.
Add a new "Custom Element" to your page.
Click on "Settings" for the Custom Element.
In the "Custom Code" section, paste the following code:

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

Click "Apply" to save the changes.

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 'modal')
render.target: Target element for rendering
customization.buttonVariant: Button style variant
customization.buttonText: Button display text
customization.buttonClassName: Additional CSS class for the button
customization.withoutCard: Whether to render without card styling (default: false)

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's Website Call Now Button Integration

How to install the Sophiie Call Now on your website.