DigitalSpot Guidelines

1 Spot. All Digital Solutions — complete admin handbook

1 Overview

DigitalSpot (www.digitalspot.pk) is a multi-service, white-label PWA + Admin CMS. It is a full digital agency storefront: services with cart & checkout, 15+ free tools, portfolio, blog, AIOU student hub, user accounts — and a 100% no-code admin panel controlling every pixel, including ten pre-wired Google AdSense placeholders.

Default admin login: admin@digitalspot.pk / Admin@123 — change it immediately via Admin → Users after first deploy.

2 Features

📱 Android-App UX

Bottom navigation, Material-3 glass cards, safe-area padding, pull-friendly tap animations, installable PWA with offline mode.

🛒 Commerce

Services with Add-to-Cart, JazzCash / Easypaisa / Bank checkout, printable PDF invoices, WhatsApp order alerts, order pipeline.

🧰 15 Built-in Tools

Word counter, QR generator, calculators, password & meta-tag generators — each tool page carries 3 ad slots and a keep-alive timer.

💰 AdSense Engine

Publisher ID + Auto Ads once + 10 pre-built slots with ON/OFF toggles and safe "Your Ad Here" fallbacks.

🎨 Theme Engine

Live brand colors, 3 font presets, dark/light defaults, radius control, dark-mode scheduler (7pm–7am), custom splash screen (2–5s, 4 animations).

🚀 Pro Extras

Spot AI chatbot, loyalty points, affiliate referrals, job board, public API (/api/v1/services), EN/UR toggle, maintenance mode.

3 Admin Guide — A to Z

Visit /admin and sign in. Everything below is editable without touching code:

SectionWhat you control
DashboardOrders, revenue, users, live ad slots, top tools at a glance.
ServicesCRUD services: price, sale price, icons, feature bullets, feature spotlight.
ToolsAttach any of the 15 built-ins, or add your own embed/link tools. Trending badges, categories.
PortfolioProjects with device-mockup previews (phone/desktop), tags, client, live link.
Blog CMSRich-text editor (H2/H3/bold/quotes/links), categories, tags, schedule posts, per-post SEO.
OrdersStatus pipeline (pending → completed), invoice links, one-tap WhatsApp customer updates.
UsersCreate users, promote roles (admin/editor/customer), block/unblock, loyalty points.
AdSense ManagerGlobal Publisher ID & Auto Ads · 10 slot codes · visual placement map.
WhatsApp & AlertsBusiness number, order/blog alert templates, custom broadcasts.
SEO ManagerDefault meta, OG image, sitemap.xml / robots.txt (auto-generated), JSON-LD schema toggle.
Site SettingsName, logo, tagline, contacts, socials, maintenance mode — plus theme, splash & pro features.
Job Board / AIOUCareer posts and AIOU past-paper/date-sheet links.

4 How to Setup AdSense in 2 Minutes ⏱️

  1. Get your codes. Go to adsense.google.com → Ads → Overview → By site. Copy your ca-pub-XXXXXXXXXXXXXXXX ID and the Auto Ads <script> snippet.
  2. Paste globally. Admin → AdSense Manager → Global Settings: paste Publisher ID + Auto Ads code, toggle Enable Auto Ads ON, Save.
  3. (Optional) Manual units. In AdSense create a display unit → copy its full code → Admin → Ad Slots → Edit Slot → paste into that slot's Ad Code → set status ON → Save.
  4. Check the map. The Live Preview Map tab shows every slot and whether it's LIVE or still a placeholder.
Slots with no code automatically render a tidy dashed "Your Ad Here" box — your layout never breaks and every slot's future position is reserved.
Ads only appear on your approved domain (digitalspot.pk). On localhost/preview URLs, Google's script loads but serves blank — this is normal AdSense behaviour, not a bug.

5 The 10 Placeholders — exactly where each one sits

HOME — header_banner · home_middle

≡ Header / Hero
AD · header_banner
SERVICES GRID
AD · home_middle
TRENDING TOOLS · BLOG · FOOTER
Leaderboard under the hero; in-feed rectangle after the services section.

TOOLS — tool_top · tool_middle · tool_bottom

Tool title & save/share
AD · tool_top
THE TOOL WIDGET
AD · tool_middle
HOW TO USE
AD · tool_bottom
Three slots on ALL 15+ tool pages. tool_middle also renders on the AIOU Hub.

BLOG — blog_top · blog_in_content · blog_sidebar · blog_bottom

AD · blog_top (list page)
TITLE · PARAGRAPH 1 · PARAGRAPH 2
AD · blog_in_content (auto-inserted)
REST OF ARTICLE
AD · blog_sidebar
AD · blog_bottom
blog_in_content is injected automatically after the 2nd paragraph of every post — zero manual work.

PORTFOLIO — portfolio_bottom

Page title
PROJECT GRID (mockup previews)
AD · portfolio_bottom
FOOTER
Single leaderboard below the portfolio grid.

Slot reference table

Slot keyPagePosition
header_bannerHomeBelow hero header
home_middleHomeAfter services grid
tool_topEvery toolAbove the tool
tool_middleEvery tool + AIOU HubBetween tool & how-to
tool_bottomEvery toolBottom of tool page
blog_topBlog indexAbove post list
blog_in_contentBlog postAuto after 2nd paragraph
blog_sidebarBlog postRight sidebar (sticky)
blog_bottomBlog postBelow article
portfolio_bottomPortfolioBelow project grid

6 FAQ

Ads show empty boxes on my domain? New AdSense sites can take 24–48h after approval to fill. The Auto Ads toggle must be ON and your domain approved in your AdSense account.

How do users install the app? On Android Chrome: menu → Install app / Add to Home screen. The splash screen, icon and shortcuts (Tools, AIOU Hub, Cart) come from the manifest automatically.

Where do WhatsApp alerts go? Every order/checkout opens a pre-filled message to the number in Admin → WhatsApp & Alerts. No API key required; optionally add Meta Cloud API credentials for full automation.

Add more tools? Admin → Tools → Add New → pick a built-in engine or paste any embed/HTML — the tool page, ads and keep-alive wiring are automatic.