Share | SupportFast Guide

Contents

https://app.supportfast.ai/share/

After creating, configuring, and training your chatbot, it’s time to share it with your end users. The Share page provides an overview of the available options for publishing your chatbot on the web.

Supportfast offers three web sharing methods:

Direct Link: Share a link that opens your chatbot in a new browser tab, where the user can start a conversation.

Chat Bubble: Embed the chatbot into your website, displaying a fixed button that, when clicked, opens the chat window as an overlay on the page.

Iframe: Embed the chatbot within one or more sections of your website, displaying it as part of the page content.

In the Share page, you will find all the necessary links and scripts to integrate the chatbot into your site. Below, we explain in detail how to use the two site integration methods.

Chat Bubble

To integrate the chat bubble into your website:

Add your website domain in the chatbot’s Settings page.
Insert the script inside the <head> tag of your site’s HTML code.

Iframe

To embed the chatbot using an iframe:

Insert an <iframe> element into one or more pages of your site.
Use the chatbot link as the value of the iframe’s src parameter.

For more information on web sharing and social channel integrations, refer to the dedicated guide: https://supportfast.ai/en/guide/integrations/

Passing user data

When integrating your chatbot into a website or online platform, you have the ability to provide the chatbot with information about the user interacting with it, if that user is registered on your site/platform.

This allows you to identify users in the Statistics who have had a conversation with your chatbot, as well as store data that can be used in the Playground.

Let’s go over the procedures for passing external data to the chatbot.

What data to pass

The script allows you to pass standard user data, along with a set of additional metadata to be associated with the user.

The standard fields correspond exactly to the standard user variables in the Playground, namely: email, phone, and fullName.
Refer to the Playground Variables documentation to understand how to use them.

To add a metadata field, follow this procedure:

First, go to your chatbot’s Playground, open the Variables panel under the “User” section, and create the variable with the desired name.
Only after declaring the variable in the Playground can you add a metadata field with the same name and pass the corresponding value.

Chat Bubble

For the Chat Bubble, you need to add a second Script to your website’s code. Below is a template with example data:

<script>
    window.chatbotUserData = {
    fullName: "test test",
    email: "example@gmail.com",
    metadata: {
        // You can add other data if needed
    }
}
</script>

This script should be dynamic, meaning it must use values that are not fixed but instead reflect the current user. For this reason, the way you insert this script is different from how the chat bubble itself is added.

Below are the instructions for the most common CMS platforms.

WordPress

Code to insert in the functions.php of your child theme:

function supportfast_add_chatbot_userdata_script() {
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        ?>
        <script>
            window.chatbotUserData = {
                fullName: "<?php echo esc_js( $current_user->display_name ); ?>",
                email: "<?php echo esc_js( $current_user->user_email ); ?>",
                metadata: {
                    // You can add other data if needed
                }
            };
        </script>
        <?php
    }
}
add_action('wp_head', 'supportfast_add_chatbot_userdata_script');

Prestashop

Code to be inserted in the template .tpl (header.tpl) before closing the </head> tag:

{if $logged}
    <script>
        window.chatbotUserData = {
            fullName: "{$customer.firstname|escape:'html':'UTF-8'} {$customer.lastname|escape:'html':'UTF-8'}",
            email: "{$customer.email|escape:'html':'UTF-8'}",
            metadata: {
                // You can add other data if needed
            }
        };
    </script>
{/if}

Shopify

Code to be placed in the theme.liquid before the closing tag </head>:

{% if customer %}
  <script>
    window.chatbotUserData = {
      fullName: "{{ customer.first_name | escape }} {{ customer.last_name | escape }}",
      email: "{{ customer.email | escape }}",
      metadata: {
        // You can add other data if needed
      }
    };
  </script>
{% endif %}

Iframe

In the case of Iframe, data is sent from your site/platform to the chatbot in the following manner:

const iframe = document.getElementById('chatbot-iframe');
let readyListener;
if(iframe) {
    readyListener = (event) => {
        if (
            event.data &&
            event.data.type === 'CHATBOT_READY' &&
            event.source === iframe.contentWindow
        ) {
            iframe.contentWindow.postMessage({
                type: 'CHATBOT_USER_DATA',
                data: {
                    fullName: "test test",
                    email: "example@gmail.com",
                    metadata: {
                        // You can add other data if needed
                    }
                }
            }, '*');
            window.removeEventListener('message', readyListener);
        }
    }
    window.addEventListener('message', readyListener);
}

This code is used to send user data from your site to the iframe embedded in your site/platform. The iframe must have a unique ID assigned.

Below are CMS-specific integration steps.

WordPress

Insert the iframe with a unique ID on the page:

In your theme’s functions.php file, insert this script:

<?php
function chatbot_iframe_user_data_script() {
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const iframe = document.getElementById('chatbot-iframe');
                let readyListener;
                if (iframe) {
                    readyListener = function(event) {
                        if (
                            event.data &&
                            event.data.type === 'CHATBOT_READY' &&
                            event.source === iframe.contentWindow
                        ) {
                            iframe.contentWindow.postMessage({
                                type: 'CHATBOT_USER_DATA',
                                data: {
                                    fullName: "<?php echo esc_js( $current_user->display_name ); ?>",
                                    email: "<?php echo esc_js( $current_user->user_email ); ?>",
                                    metadata: {
                                        // You can add other data if needed
                                    }
                                }
                            }, '*');
                            window.removeEventListener('message', readyListener);
                        }
                    };
                    window.addEventListener('message', readyListener);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'chatbot_iframe_user_data_script');
?>

Prestashop

Insert the iframe with a unique ID in your page:

In the .tpl file of your page, add right after the iframe this block of code:

{if $logged}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var iframe = document.getElementById('chatbot-iframe');
        var readyListener;
        if (iframe) {
            readyListener = function(event) {
                if (
                    event.data &&
                    event.data.type === 'CHATBOT_READY' &&
                    event.source === iframe.contentWindow
                ) {
                    iframe.contentWindow.postMessage({
                        type: 'CHATBOT_USER_DATA',
                        data: {
                            fullName: "{$customer.firstname|escape:'html':'UTF-8'} {$customer.lastname|escape:'html':'UTF-8'}",
                            email: "{$customer.email|escape:'html':'UTF-8'}",
                            metadata: {
                                // You can add other data if needed
                            }
                        }
                    }, '*');
                    window.removeEventListener('message', readyListener);
                }
            };
            window.addEventListener('message', readyListener);
        }
    });
</script>
{/if}

Shopify

Insert the iframe with a unique ID in your page:

Add this snippet to theme.liquid (just before </body>, right after the iframe):

{% if customer %}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var iframe = document.getElementById('chatbot-iframe');
      var readyListener;
      if (iframe) {
        readyListener = function(event) {
          if (
            event.data &&
            event.data.type === 'CHATBOT_READY' &&
            event.source === iframe.contentWindow
          ) {
            iframe.contentWindow.postMessage({
              type: 'CHATBOT_USER_DATA',
              data: {
                fullName: "{{ customer.first_name | escape }} {{ customer.last_name | escape }}",
                email: "{{ customer.email | escape }}",
                metadata: {
                  // You can add other data if needed
                }
              }
            }, '*');
            window.removeEventListener('message', readyListener);
          }
        };
        window.addEventListener('message', readyListener);
      }
    });
  </script>
{% endif %}