Floating Ecommerce Display - Iframe

| Staging Version | Production Version | |:----------------:|:-------------------:| | | |

Table of Contents

1. Introduction
2. Features
3. Scripts
4. Usage
5. Folder Structure
6. How to work in this project

Introduction

This project focuses on the implementation of an iFrame that embeds Live and is distributed to clients through a script. By employing an iFrame and a specialized script, it facilitates the dynamic delivery of real time experiences to end users, offering a practical and scalable solution for integrating Live into clients' sites.

Features

• Show Live icon
• Autoplay iframe when a page is open
• Open iframe when press in Live icon
• Open Live in new tab when press in Live icon
• Change position of Live icon

Script

The script accepts the following parameters

• showLiveButton - to show the live icon
• position - to put the icon on the left side or right side
• openNewTab - to open the live in a new tab
• autoPlayIframe - to leave the iframe open
• storeId - id of the client's store
• marginBottom - to define position of button in bottom, by default value is 0

Example Script

<script
    src="https://unpkg.com/@gojiraf/floating-ecommerce-display-prod/dist/gj-ctc-production.js"
    autoPlayIframe="true"
    openNewTab="false"
    showLiveButton="true"
    position="right"
    storeId="<storeId>"
    marginBottom="55"
></script>

Usage

For use this project you need to start a Live and run the command server:dev to start a project in local

• Simulate params of script in file App.tsx

const simulatedProps: AppProps = {
    position: 'left',
    autoPlayIframe: true,
    openLiveNewTab: false,
};

return <ClickToCall {...simulatedProps} />;

Folder Structure

|    |-- src/
|       |-- app.tsx
|       |-- index.tsx
|       |-- App.css
|       |-- index.css
|       |-- components/
|       |     |-- Devices/
|             |--  Forms/
|             |-- Iframe/ 
|             |-- Kit/
|             |-- ClickToCall.tsx
|   |-- ...
|-- README.md

How to work in this project

Two branchs:

• dev - for staging
• main - for production

Git flow:

• Create a new branch from dev and do the PR against the same branch.
• Once the PR has been merged against the dev branch, you need to create another PR against the main branch to take the changes to production.

Deploy changes:

• For Deploy changes you need access to gojiraf npm account - You must consult the corresponding person for access
• Once you have access to gojiraf npm account you need to open terminal and run npm login
• Then run the script publish corresponding to each environment
• Don't forguet to change package.json name with -prod or -test and the version of package