Logchange Docs - Installation

Requirements

Before proceeding, please ensure you have created an account on Logchange and completed the configuration steps outlined in the SDK Configuration tab. Additionally, make sure to subscribe to a plan to activate your account fully.

Get your snippet code

On the Logchange dashboard, navigate to Settings > Configurations

Load the snippet on your website Copy/paste the snippet code and add it to the head section of your website.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your website</title>

    <!-- Paste Logchange snippet code here -->
    <script>
      (function (l, o, g, c, h, a, n, ge) {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://plugins.logchange.io/changelog.js";

        l.LogchangeConfig = {
          application_id: "******",
        };

        document.getElementsByTagName("head")[0].appendChild(s);
      })(window);
    </script>
  </head>
  <body></body>
</html>

Webflow Integration

First, define an ID for the button you want to use to display the Changelog panel:

Open Webflow Designer:
- Go to your Webflow project and open the Designer tool.
Select the Button:
- Click on the button you want to use.
- With the button selected, open the settings panel on the right side (gear icon).
- In the settings panel
- Enter a unique ID for the button in the "ID" field: changelogButton.

Add the Custom Code

Visit Site Settings:
- Go to the Dashboard of your Webflow project.
- Click on "Project Settings".
Navigate to the Custom Code Tab:
- Go to the "Custom Code" tab.
- Add the following custom code in the Footer Code section, replacing ****** with your Application ID, which you can find here.

<script>
  (function (l, o, g, c, h, a, n, ge) {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "https://plugins.logchange.io/changelog.js";

    l.LogchangeConfig = {
      application_id: "******",
    }

    document.getElementsByTagName("head")[0].appendChild(s);
  })(window);

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('changelogButton').addEventListener('click', function() {
    window.Logchange.toggle();
  });
});
</script>

Click Save Changes

Framer Integration

Go to your Framer project and paste the code bellow in Page Settings > Custom Code > Start of tag

<script>
  (function (l, o, g, c, h, a, n, ge) {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "https://plugins.logchange.io/changelog.js";

    l.LogchangeConfig = {
      application_id: "******",
    }

    document.getElementsByTagName("head")[0].appendChild(s);
  })(window);
</script>

Click on the Code Overrides on the Button section and click on the "Edit code" button

Add this code on the top of the file :

type CustomWindow = Window &
  typeof globalThis & {
      LogchangeConfig: { application_id: string }
      Logchange: {
          show: () => void
          hide: () => void
          toggle: () => void
          hasNotification: boolean
          setUser: (user: {
              email: string
              fullname: string
              attributes: Record<string, string>
          }) => void
          setLanguage: (
              language: "fr" | "en" | "it" | "pt" | "be" | "es" | "de" | "cn"
          ) => void
      }
  }

At the end of the file, add this code :

react.ts

export function withClick(Component): ComponentType {
  return (props) => {
    const handleClick = () => {
      const w = window as CustomWindow
      w.Logchange.show()
    }

    return <Component {...props} onClick={handleClick} />
  }
}

Save the file
Now in the Code Overrides section, select the override withClick and add it to the component

It's now ready to use

Advance integrations

If you are using a framework, please check the corresponding guide just below

Typescript

To prevent linter errors in your project, update (or create) your global.d.ts file and add the following types

declare module globalThis {
  interface Window {
    LogchangeConfig: {
      application_id: string;
    };
    Logchange: any & {
      show: () => void;
      hide: () => void;
      toggle: () => void;
      hasNotification: boolean;
      setUser: (user: {
        email: string;
        fullname: string;
        attributes: Record<string, string>;
      }) => void;
      setLanguage: (
        language: "fr" | "en" | "it" | "pt" | "be" | "es" | "de"
      ) => void;
    };
  }
}

React

react.ts

// For project using Hook component
useEffect(() => {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "https://plugins.logchange.io/changelog.js";

    window.LogchangeConfig = {
      application_id: "******",
    }

    document.getElementsByTagName("head")[0].appendChild(s);
}, []);



// For project using Class component
async componentDidMount() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "https://plugins.logchange.io/changelog.js";

    window.LogchangeConfig = {
      application_id: "******",
    }

    document.getElementsByTagName("head")[0].appendChild(s);
}

Vue

vue.ts

new Vue({
  mounted: () => {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "https://plugins.logchange.io/changelog.js";

    window.LogchangeConfig = {
      application_id: "******",
    };

    document.getElementsByTagName("head")[0].appendChild(s);
  },
}).$mount("#app");

Nuxt.js

Create a plugin that integrates our SDK to seamlessly incorporate Logchange's functionality into your platform.

// plugins/logchange.client.ts
// Typescript support
type CustomWindow = Window &
  typeof globalThis & {
    LogchangeConfig: { application_id: string };
    Logchange: {
      show: () => void;
      hide: () => void;
      toggle: () => void;
      hasNotification: boolean;
      setUser: (user: {
        email: string;
        fullname: string;
        attributes: Record<string, string>;
      }) => void;
      setLanguage: (
        language: "fr" | "en" | "it" | "pt" | "be" | "es" | "de" | "cn"
      ) => void;
    };
  };

export default defineNuxtPlugin(() => {
  const w = window as CustomWindow;

  w.LogchangeConfig = {
    application_id: "*****",
  };

  var s = document.createElement("script");
  s.type = "text/javascript";
  s.async = true;
  s.src = "https://plugins.logchange.io/changelog.js";

  document.getElementsByTagName("head")[0].appendChild(s);

  return {
    provide: {
      logchange: w.Logchange,
    },
  };
});

Usage

Get started with Logchange