Installation Guide

Add ChangeTiny to your website in 2 minutes. Works with any tech stack.

Quick Start

All you need is to add one script tag to your website. The installation method varies slightly depending on your framework.

  1. Find your framework below
  2. Copy the installation code
  3. Paste it into your project
  4. Deploy and you're done!

Your Script Tag

Replace YOUR_WEBSITE_ID with your actual website ID from the dashboard. 

<script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>

WordPress

Add ChangeTiny to your WordPress site using a plugin or theme files.

Option 1: Using WPCode Plugin (Recommended)

Install the free WPCode plugin for the easiest installation.

  1. Install and activate the WPCode plugin
  2. Go to Code Snippets → Headers & Footer
  3. Paste the script in the Footer section
  4. Click Save Changes
<script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>

Option 2: Add to Theme Footer

Edit your theme's footer.php file (use a child theme). 

<?php wp_footer(); ?>
<script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>
</body>
</html>

Webflow

Add ChangeTiny to your Webflow site using custom code.

Add to Footer Code

  1. Open your Webflow project settings
  2. Go to Custom Code
  3. Paste the script in the Footer Code section
  4. Publish your site
<script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>

Drupal

Add ChangeTiny to your Drupal site by editing your theme template.

Add to Theme Template

Edit your theme's html.html.twig file. 

<body{{ attributes }}>
  {{ page_top }}
  {{ page }}
  {{ page_bottom }}
  <script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>
</body>

Joomla

Add ChangeTiny to your Joomla site by editing your template.

Add to Template

Edit your template's index.php file before the closing body tag. 

<jdoc:include type="modules" name="debug" style="none" />
<script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>
</body>

Plain HTML

Add ChangeTiny to your static HTML website.

Add Before Closing Body Tag

Simply paste the script tag before the closing </body> tag. 

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your content -->

  <script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>
</body>
</html>

React

Add ChangeTiny to your React application using the useEffect hook.

Option 1: Add to index.html (Recommended)

Add the script tag directly to your public/index.html file before the closing </body> tag. 

<!-- public/index.html -->
<body>
  <div id="root"></div>
  <script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>
</body>

Option 2: Dynamic Loading with useEffect

Load the script dynamically in your main App component. 

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.changetiny.com/widget.js';
    script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>Your app content</div>;
}

Next.js

Use Next.js's built-in Script component for optimal loading.

Using the Script Component

Add to your root layout or _app.js file using the Next.js Script component. 

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.changetiny.com/widget.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Note: The afterInteractive strategy ensures the script loads after the page becomes interactive, optimizing performance.

Angular

Add ChangeTiny to your Angular application's index.html or load it dynamically.

Option 1: Add to index.html (Recommended)

Add the script tag to your src/index.html file. 

<!-- src/index.html -->
<body>
  <app-root></app-root>
  <script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>
</body>

Option 2: Dynamic Loading in Component

Load the script dynamically using Renderer2 and DOCUMENT injection. 

import { Component, OnInit, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit() {
    const script = this.renderer.createElement('script');
    script.src = 'https://cdn.changetiny.com/widget.js';
    script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
    this.renderer.appendChild(this.document.body, script);
  }
}

Vue.js

Add ChangeTiny to your Vue application using the mounted lifecycle hook.

Option 1: Add to index.html

Add the script tag to your public/index.html file. 

<!-- public/index.html -->
<body>
  <div id="app"></div>
  <script src="https://cdn.changetiny.com/widget.js" data-website-id="YOUR_WEBSITE_ID"></script>
</body>

Option 2: Using mounted() Hook (Vue 3)

Load the script dynamically in your main App component. 

<script>
export default {
  name: 'App',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://cdn.changetiny.com/widget.js';
    script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
    script.async = true;
    document.body.appendChild(script);
  },
  beforeUnmount() {
    // Clean up if needed
  }
}
</script>

Svelte

Add ChangeTiny to your Svelte application using onMount.

Using onMount

Add the script dynamically in your App.svelte component. 

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.changetiny.com/widget.js';
    script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  });
</script>

<main>
  <!-- Your app content -->
</main>

Remix

Add ChangeTiny to your Remix application in the root route.

Add to root.tsx

Include the script in your root layout's scripts array. 

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <script
          src="https://cdn.changetiny.com/widget.js"
          data-website-id="YOUR_WEBSITE_ID"
        ></script>
        <Scripts />
      </body>
    </html>
  );
}

Vanilla JavaScript

Load ChangeTiny dynamically with vanilla JavaScript.

Dynamic Script Loading

Load the script programmatically when needed. 

// Load ChangeTiny widget
(function() {
  const script = document.createElement('script');
  script.src = 'https://cdn.changetiny.com/widget.js';
  script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
  script.async = true;

  // Optional: Add load event listener
  script.onload = function() {
    console.log('ChangeTiny widget loaded');
  };

  document.body.appendChild(script);
})();

Need Help?

Can't find your platform or running into issues? We're here to help.

Contact Support Go to Dashboard