Integration Guide

Complete guide for adding the NowNowNow widget to your website or application.

Basic Integration

Add the NowNowNow widget to your website by including the script tag in your HTML. The widget can be placed in either the head section or before the closing body tag.

Standard Installation

<script 
  defer 
  src="https://widget.nownownow.io/now-widget.js" 
  now-data-org-id="YOUR_ORGANIZATION_ID"
  now-data-token="YOUR_WIDGET_TOKEN">
</script>

Sample Implementation

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
  
  <!-- Add the Now Widget script in the head -->
  <script 
    defer 
    src="https://widget.nownownow.io/now-widget.js" 
    now-data-org-id="YOUR_ORGANIZATION_ID"
    now-data-token="YOUR_WIDGET_TOKEN"
    now-data-position="left"
    now-data-button-color="#1a73e8"
    now-data-button-size="90">
  </script>
</head>
<body>
  <!-- Your website content -->
</body>
</html>

Configuration Options

The widget can be customized with several attributes to match your site's design and functionality requirements.

Attribute	Description	Values	Default
now-data-org-id	Your organization ID (required)	String	None
now-data-token	Your widget token (required)	String	None
now-data-theme	Widget theme	"light", "dark"	"dark"
now-data-position	Widget position on screen	"left", "right"	"left"
now-data-button-color	Widget button color	Hex color code	"#1a73e8"
now-data-button-size	Size of the widget button in pixels	40-120	90

Framework Integration

The NowNowNow widget can be integrated with popular JavaScript frameworks. Here are examples for React, Vue, and Next.js.

React

// NowWidget.tsx
import { useEffect } from 'react';

interface NowWidgetProps {
  orgId: string;
  token: string;
  theme?: 'dark' | 'light';
  position?: 'left' | 'right';
  buttonColor?: string;
  buttonSize?: string;
}

export function NowWidget({ 
  orgId, 
  token, 
  theme = 'dark', 
  position = 'left', 
  buttonColor = '#1a73e8', 
  buttonSize = '90' 
}: NowWidgetProps): null {
  useEffect(() => {
    // Create script element
    const script = document.createElement('script');
    script.src = 'https://widget.nownownow.io/now-widget.js';
    script.defer = true;
    script.setAttribute('now-data-org-id', orgId);
    script.setAttribute('now-data-token', token);
    script.setAttribute('now-data-theme', theme);
    script.setAttribute('now-data-position', position);
    script.setAttribute('now-data-button-color', buttonColor);
    script.setAttribute('now-data-button-size', buttonSize);
    
    // Add to document
    document.head.appendChild(script);
    
    // Cleanup on unmount
    return () => {
      document.head.removeChild(script);
    };
  }, [orgId, token, theme, position, buttonColor, buttonSize]);
  
  return null; // This component doesn't render anything
}

// Usage in a React component
// <NowWidget orgId="YOUR_ORG_ID" token="YOUR_TOKEN" />

Next.js

// In app/layout.tsx for Next.js App Router
import type { Metadata } from 'next';

interface RootLayoutProps {
  children: React.ReactNode;
}

export const metadata: Metadata = {
  title: 'Your App',
  description: 'Your app description',
};

export default function RootLayout({ children }: RootLayoutProps): React.ReactElement {
  return (
    <html lang="en">
      <head>
        <script
          defer
          src="https://widget.nownownow.io/now-widget.js"
          now-data-org-id="YOUR_ORG_ID"
          now-data-token="YOUR_TOKEN"
          now-data-theme="dark"
          now-data-position="left"
          now-data-button-color="#1a73e8"
          now-data-button-size="90"
        />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

Vue.js

<!-- NowWidget.vue -->
<template>
  <!-- This component doesn't render anything -->
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'NowWidget',
  props: {
    orgId: {
      type: String,
      required: true
    },
    token: {
      type: String,
      required: true
    },
    theme: {
      type: String,
      default: 'dark',
      validator: (value: string) => ['dark', 'light'].includes(value)
    },
    position: {
      type: String,
      default: 'left',
      validator: (value: string) => ['left', 'right'].includes(value)
    },
    buttonColor: {
      type: String,
      default: '#1a73e8'
    },
    buttonSize: {
      type: String,
      default: '90'
    }
  },
  data() {
    return {
      script: null as HTMLScriptElement | null
    };
  },
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://widget.nownownow.io/now-widget.js';
    script.defer = true;
    script.setAttribute('now-data-org-id', this.orgId);
    script.setAttribute('now-data-token', this.token);
    script.setAttribute('now-data-theme', this.theme);
    script.setAttribute('now-data-position', this.position);
    script.setAttribute('now-data-button-color', this.buttonColor);
    script.setAttribute('now-data-button-size', this.buttonSize);
    
    document.head.appendChild(script);
    this.script = script;
  },
  beforeUnmount() {
    if (this.script) {
      document.head.removeChild(this.script);
    }
  }
});
</script>

<!-- Usage: -->
<!-- <NowWidget org-id="YOUR_ORG_ID" token="YOUR_TOKEN" /> -->

Troubleshooting

Common issues and solutions when integrating the NowNowNow widget.

Widget not appearing

Ensure that your organization ID and token are correct. Check your browser console for any errors. If your site uses Content Security Policy (CSP), you may need to configure it to allow our script.

See CSP Configuration Guide

Widget conflicts with other scripts

If the widget interferes with other scripts on your page, try changing the loading order or placing our script tag at the end of your body section. You can also try using the defer attribute.

Custom styling conflicts

The widget is designed to be contained within its own shadow DOM to prevent styling conflicts. If you notice any styling issues, please ensure your CSS selectors aren't overly aggressive.

Need additional help?

If you're experiencing issues not covered here, our support team is ready to assist.