AtlasGo to Atlas↗️

No results

Wix

Last updated January 5, 2024

Simple sites (without Members Area)

Wix support adding Atlas snippet as a global custom code, similar to marketing or analytics tools.

  • Go to your site dashboard
  • Go to Settings via the left hand side nav (closer to bottom)
  • Go to Custom code (at the bottom of Settings page)
  • Press Add custom code button
  • Paste the snippet from  Atlas installation page  into a snippet field
  • Ensure the snippet configuration:
  • Add Code to Pages: All pages (Load code once)
  • Place Code in: Head
  • Save the snippet
  • Enable the custom code with a toggle

Sites with Members Area

This setup requires additional steps in order to supply a user details to Atlas.

Snippet code

  1. Follow the steps for Simple sites with the code piece below
  2. Replace YOUR_APP_ID on line 3 with the value from  Atlas Organization  page.
<script>
  (() => {
    const ATLAS_APP_ID = "YOUR_APP_ID";
    let identityParams;

    window.addEventListener(
      "message",
      (event) => {
        const message = event.data;

        if (message?.channel !== "Atlas") return;
        if (!message.identityParams) return;
        // console.log("Received message from bridge", message);

        if (window?.Atlas) {
          window.Atlas.call("identify", message.identityParams);
        } else {
          identityParams = message.identityParams;
        }
      },
      false
    );

    // Atlas Snippet from install page
    (()=>{"use strict";var t,e={appId:ATLAS_APP_ID,v:2,q:[],call:function(){this.q.push(arguments)}};window.Atlas=e;var n=document.createElement("script");n.async=!0,n.src="https://app.atlas.so/client-js/atlas.bundle.js";var s=document.getElementsByTagName("script")[0];null===(t=s.parentNode)||void 0===t||t.insertBefore(n,s)})();

    window.Atlas.call("start");

    if (identityParams) {
      window.Atlas.call("identify", identityParams);
      identityParams = undefined;
    }
  })();
</script>

Fetching user information

This step is sending a user details object from Wix Javascript environment to a browser environment where Atlas widget operates.

Add the code below to masterPage.js. This file executes on Wix servers before every page of your site.  Details on this file on Wix docs .

The code is specifically built with separate functions. In case you already have any code running in $w.onReady, just append startAtlasBridge() to the end of it.

import { authentication, currentMember } from "wix-members-frontend";
import wixWindowFrontend from "wix-window-frontend";

$w.onReady(function () {
  // some code may already be here

  startAtlasBridge();
});

function startAtlasBridge() {
  if (authentication.loggedIn()) {
    notifyLogIn(currentMember, "PAGE_LOAD");
  }

  authentication.onLogin((updatedCurrentMember) => {
    notifyLogIn(updatedCurrentMember, "LOGGED_IN");
  });
}

function notifyLogIn(currentMember, event) {
  currentMember
    .getMember()
    .then((member) => {
      wixWindowFrontend.postMessage({
        channel: "Atlas",
        event,
        identityParams: buildIdentityParams(member),
      });
    })
    .catch((error) => {
      console.error(error);
    });
}

function buildIdentityParams(member) {
  const userId = member._id;
  let name = [member.contactDetails?.firstName, member.contactDetails?.lastName]
    .filter(Boolean)
    .join(" ")
    .trim();
  if (name === "") {
    name = member.profile.nickname;
  }

  // do not pass empty keys
  const params = { userId, name };

  const email = member?.loginEmail || member.contactDetails?.emails[0];
  if (email) {
    params.email = email;
  }

  if (member.contactDetail?.phones?.length) {
    params.phoneNumber = member.contactDetails.phones[0];
  }

  return params;
}

Was this article helpful?