Setting Up Yotpo Loyalty in the Stay Customer Portal

We are ecstatic to bring you a new and improved partnership with Yotpo! You can now display the Yotpo widgets from inside your Shopify theme, within the Stay AI customer portal. Let's get you started!

Requirements:

Yotpo Loyalty & Rewards is installed on your Shopify store
The customer is logged into the Shopify accounts page to view the widget on the customer portal
You have set up at least one reward widget from inside Yotpo Loyalty & Rewards

Getting Started on Yotpo

1. Navigate to Display On-site -> Rewards Page

2. Select Create a New Rewards Page or edit an existing rewards page.

3. Use the editor to create the reward interaction of your choice.

4. Select the embed option and get the ID of the Yotpo widget you would like to include.

Setting Up Your Stay AI Customer Portal

1. Navigate to the Customer Portal design page - Customer Portal --> Design

2. Select the HTML dropdown and insert the following code block.

<div class="yotpo-holder-stay">
</div>

Heads Up!: If you update the class inside the div, that will also need to be updated in the JavaScript code-block.

3. Select the JavaScript dropdown and insert the following code block and update YOUR_WIDGET_ID with the widget ID you retrieved from Yotpo in the previous steps.

   // Function to check if user is logged in to Shopify
   function isShopifyUserLoggedIn() {
        console.log('Checking Shopify login status...');
        const customerId = typeof ShopifyAnalytics !== 'undefined' && 
                          ShopifyAnalytics.meta?.page?.customerId;
        console.log('Customer ID:', customerId);
        return !!customerId;
    }

    // Function to create and inject the Yotpo widget
    function createYotpoWidget() {
        console.log('Creating Yotpo widget...');
        const widgetDiv = document.createElement('div');
        widgetDiv.className = 'yotpo-widget-instance';
        widgetDiv.setAttribute('data-yotpo-instance-id', 'YOUR_WIDGET_ID');
        console.log('Widget created:', widgetDiv);
        return widgetDiv;
    }

    // Function to observe DOM for element
    function waitForElement(selector, callback, timeout = 10000) {
        console.log(`Starting to watch for element: ${selector}`);
        const startTime = Date.now();

        // Create an observer instance
        const observer = new MutationObserver((mutations, obs) => {
            console.log('DOM mutation detected');
            const element = document.querySelector(selector);
            
            if (element) {
                console.log('Target element found:', element);
                obs.disconnect();
                callback(element);
                return;
            }

            // Check for timeout
            if (Date.now() - startTime > timeout) {
                console.warn(`Element ${selector} not found within ${timeout}ms`);
                obs.disconnect();
            }
        });

        // Check if element already exists before starting observation
        const element = document.querySelector(selector);
        if (element) {
            console.log('Element already exists in DOM:', element);
            observer.disconnect();
            callback(element);
            return; // Add return to prevent unnecessary observer setup
        }

        // Start observing
        console.log('Setting up MutationObserver...');
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    // Function to initialize everything
    function init() {
        console.log('Initializing script...');
        
        // Check login status first
        const isLoggedIn = isShopifyUserLoggedIn();
        console.log('User login status:', isLoggedIn);

        // Wait for the yotpo-holder-stay element
        waitForElement('.yotpo-holder-stay', (yotpoHolder) => {
            console.log('Yotpo holder found, proceeding with injection');
            const widgetDiv = createYotpoWidget();
            try {
                yotpoHolder.appendChild(widgetDiv);
                console.log('Yotpo widget successfully injected');

                if(isLoggedIn) {
                    yotpoWidgetsContainer.initWidgets();
                    console.log('Loaded YOTPO')
                }
                
            } catch (error) {
                console.error('Error injecting widget:', error);
            }
        });
    }
    if (document.readyState === 'loading') {
        console.log('Document still loading, adding DOMContentLoaded listener');
        document.addEventListener('DOMContentLoaded', init);
    } else {
        console.log('Document already loaded, executing immediately');
        init();
    }

4. Stay Ai calls the Yotpo initialization function again once it propagates the widget div.

Checking Your Work

If successful, if the customer is logged in through the Shopify account page, you will see the reward widget displayed in the location of your custom HTML block!

Questions? Please feel free to reach out to your customer support manager!