alkarartech-tagger

A small business tagger for client websites: inject your company’s branding (“Built by [Your Company]” with logo and link) into the footer—or as a corner badge—with one line of config. Works with any stack (Vite, React, or plain HTML).

By Haydar Al-Karar LLC (doing business as Alkarar Tech). Website: alkarartech.com.

Features

• One-line integration — Vite plugin or a single React component
• Automatic placement — Footer block and/or optional corner badge
• Background-sensitive logo — Logo switches between black and white based on the background (light/dark) so it stays visible
• Configurable — Company name, logo URL, website URL, placement, “Built by” / “Powered by”, light/dark/auto theme
• No tracking — No external requests or analytics
• Framework-agnostic — Vite plugin injects a small script so it works with React, Vue, Svelte, or plain HTML

Install

npm install alkarartech-tagger

Quick start

1. Vite (any framework)

In your client project:

1. Add a target in your layout where the tag should appear (e.g. in the footer):

   <div data-tagger="footer"></div>

2. In vite.config.ts:

   import { defineConfig } from 'vite';
   import { alkarartechTaggerVitePlugin } from 'alkarartech-tagger';
   
   export default defineConfig({
     plugins: [
       alkarartechTaggerVitePlugin({
         companyName: 'Alkarar Tech',
         websiteUrl: 'https://alkarartech.com',
         // logoUrl: optional — uses bundled logo if omitted
         placement: 'footer', // or ['footer', 'badge']
         wording: 'built',    // or 'powered'
         theme: 'auto',       // 'light' | 'dark' | 'auto' (background-sensitive)
       }),
     ],
   });

That’s it. The plugin injects a script that finds [data-tagger="footer"] and inserts “Built by Alkarar Tech” with the logo and link. The logo is background-sensitive: it stays black on light backgrounds and inverts to white on dark backgrounds.

2. React (explicit placement)

When you control the layout and want the tag in a specific place:

import { BusinessTaggerFooter } from 'alkarartech-tagger/react';

export function App() {
  return (
    <div>
      <main>{/* ... */}</main>
      <footer>
        <BusinessTaggerFooter
          companyName="Alkarar Tech"
          websiteUrl="https://alkarartech.com"
          wording="built"
          theme="auto"
          variant="footer"
        />
      </footer>
    </div>
  );
}

Use variant="badge" for a fixed corner badge instead of inline footer.

3. Static HTML (no build)

1. Add the hook where you want the tag:

   <div data-tagger="footer"></div>

2. Before </body>, set the config and run the injector:

   <script>
     window.__ALKARARTECH_TAGGER_CONFIG__ = {
       companyName: 'Alkarar Tech',
       websiteUrl: 'https://alkarartech.com',
       placement: 'footer',
       wording: 'built',
       theme: 'auto'
     };
   </script>
   <script type="module">
     import { run } from './node_modules/alkarartech-tagger/dist/injector.js';
     run(window.__ALKARARTECH_TAGGER_CONFIG__);
   </script>

   Adjust the path to injector.js if you serve it from elsewhere. The default logo is bundled; for a custom logo, set logoUrl in the config.

Config reference

| Option | Type | Default | Description | |---------------|-------------------------|-----------|-------------| | companyName | string | required | Your company/agency name. | | websiteUrl | string | required | Link URL (e.g. your site). | | logoUrl | string | (bundled) | Logo: URL, data URL, or inline <svg>...</svg>. Omit to use the default bundled logo. | | placement | 'footer' \| 'badge' \| 'header' or array | 'footer' | Where to inject. 'badge' creates a fixed corner badge if no [data-tagger="badge"] exists. | | wording | 'built' \| 'powered' | 'built' | “Built by” vs “Powered by”. | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | 'auto' = background-sensitive (logo inverts on dark). | | className | string | — | Extra CSS class on the tagger link. |

Security: companyName, websiteUrl, and logoUrl are rendered in the page. Only use trusted values. websiteUrl must be http or https; logoUrl can be a URL, data URL, or inline SVG (from a trusted source).

Background-sensitive logo

The default logo is black. When theme: 'auto' (default):

• On light backgrounds the logo stays black.
• On dark backgrounds the logo is inverted (CSS filter: invert(1)) so it appears white.

The script detects the computed background of the tag container (or its parents) and applies the appropriate class. You can force a style with theme: 'light' or theme: 'dark'.

Placement and hooks

• Footer — Put <div data-tagger="footer"></div> in your footer. The script replaces its content with the tag.
• Badge — Either add <div data-tagger="badge"></div> where you want it, or set placement: 'badge' (or include 'badge' in the array) and the script will append a fixed corner badge to the page.
• Header — Use <div data-tagger="header"></div> and set placement: 'header' (or include 'header' in the array).

Styling

All UI is under the class .alkarartech-tagger. You can override colors/fonts in your CSS, for example:

.alkarartech-tagger {
  font-size: 11px;
  color: #6b7280;
}

Dark style is applied with .alkarartech-tagger--dark when background-sensitive mode chooses a dark theme.

Publishing to npm

1. Set the package name (and scope) in package.json if you want e.g. @yourscope/alkarartech-tagger.

2. Log in: npm login.

3. Build and publish:

   npm run build
   npm publish

For a scoped package that’s public:

npm publish --access public

Adding the tagger to client projects

• Vite: Install the package, add the plugin to vite.config.ts with your companyName, websiteUrl, and options, and add <div data-tagger="footer"></div> in the layout (e.g. footer).
• React: Install the package and render <BusinessTaggerFooter ... /> in your root layout (e.g. in the footer).
• Static HTML: Add the config script and the injector.js script tag, and the data-tagger="footer" div.

Every site you ship can use the same config so your branding appears consistently in the footer (and optionally as a badge) with the logo adapting to light/dark backgrounds.