Skip to main content

Creating a FAB

In this guide, we will walk you through the steps to integrate a StoryFAB into your existing web page. Additionally, we'll explain how to include the necessary HTML code section, CSS, and JavaScript files to ensure the component functions correctly.

Let's get started!

Step 1: Extract the StoryFAB Component Files​

Begin by extracting the component package from the provided compressed file. It should include the following necessary files:

  • sf-fab.html (HTML file)
  • sf-fab.css (CSS file)
  • sf-fab.js (JavaScript file)

Step 2: Create/Select a Folder on Your Existing Website​

Access your existing website files using your preferred content management system, code editor, or FTP file manager.

Create a new folder within your website directory to house the CSS and JS files. We suggest you name the folder storyfile, but you can also name it anything you prefer, like components or assets. (If you prefer, you can save the sf-fab.css and sf-fab.js files within your existing folder structure.)

Step 3: Install the Required Component Files​

Move or copy the sf-fab.css and sf-fab.js files into the folder you created or selected in Step 2.

In your text/code editor, open the HTML file that will contain the StoryFAB.

Locate the <head> section of your HTML file.

Within the <head> section, add the following line to link the StoryFAB CSS file:

<link
    rel="stylesheet"
    type="text/css"
    href="path/to/sf-fab.css"
>

In your text/code editor, open the HTML file that will contain the StoryFAB.

Locate the <head> section of your HTML file. (You can also place the file just before the closing </body> tag).

Within the <head> section, add the following line to link the StoryFAB JavaScript file:

<script src="path/to/sf-fab.js"></script>

Replace the src value path/to/sf-fab.js with the relative path to the folder from Step 2 on your web page to the sf-fab.js file.

Step 6: Place the StoryFAB HTML Component in Your Web Page​

Open the HTML file of your existing web page in a code editor.

Locate the <body> tag where you want to insert the StoryFAB HTML5 component.

Insert the following code at that location:

<!--SF FAB BEGIN-->

<!--MODAL-->
<section class="modal hidden">
  <div>
    <button class="btn-close">⨉</button>
    <div class="sf-container">
      <!--iFrame id must match with id value in sf-fab.js on line 13-->
      <iframe id="sf-content"
              src="[STORYFILE URL HERE]"
              allow="microphone"
              frameborder="0"
              allowfullscreen=""
              style="position: absolute; top: 0px; left: 0px; opacity: 1; visibility: visible; width: 100%; height: 100%;">
      </iframe>
    </div>
  </div>
</section>

<!--OVERLAY-->
<div class="overlay hidden"></div>

<!--FAB WIDGET-->
<div class="sfwidget">
    <img src="[URL of JPG, PNG, or Animated GIF]"
         style="width: 150px;
                height: 150px;
                border-radius: 50%">
    <button class="btn btn-open">💬 [BUTTON LABEL TEXT HERE] </button>
</div>

<!--SF FAB END-->

Replace the src value [URL of JPG, PNG, or Animated GIF] with the actual URL for the image file to be displayed in the StoryFAB.

Replace the src value [STORYFILE URL HERE] with the actual URL for the link generated in Conversa Publish.

Step 7: Save and Test​

Save the changes you made to your existing web page and ensure all the files are correctly uploaded to your web server.

Open your web page in a web browser to test the integration of the StoryFAB component. Make sure the component appears and functions as expected.

Changes in style, location, and z-index can be made through the sf-fab.css file.

Conclusion​

Congratulations! You have successfully integrated a StoryFAB component into your existing web page, along with the necessary CSS and JavaScript files.