prompts.txt

### Integration Vision & Implementation-Prompt — **“FluxCX Everywhere” widget**  > **Goal** Re-position FluxCX as an *overlay add-on* that snaps into the agent desks of ​_any_​ modern contact-centre stack (Zendesk, Salesforce Service Cloud, Intercom, Genesys, NICE CXone, Talkdesk, Freshdesk, Amazon Connect, etc.) with zero-switching cost for agents.  ---  ## 1 Product framing (for website & sales deck)  | Message pillar | Supporting UI / copy element | |----------------|------------------------------| | **Works inside the tools you already use** | Carousel of ticket-view screenshots: Zendesk, Salesforce, Genesys – each shows right-side FluxCX widget. | | **One-click browser add-on** (Chrome/Edge) | “Install extension” CTA + gif of side-panel sliding in. | | **Same AI super-powers, no migration** | Short bullet list: real-time suggestions, knowledge retrieval, after-call work. | | **Secure & compliant** | SOC 2 / GDPR badges persist. |  ---  ## 2 Widget design spec (hand to UI designer)  1. **Form factor**      * 360 px fixed width side-panel.      * Dark-on-light FluxCX theme to contrast with host tool.      * Docking modes: ▸ right rail (default), ▸ floating pop-over (mobile).  2. **Top bar (48 px)**      * FluxCX bolt icon • word “FluxCX” • “Live” green dot.      * Collapse ▼ icon.  3. **Tab ribbon (40 px high)**      * **AI Replies** | Knowledge | Coaching | ACW • hot-key badges (Alt + 1-4).      * Channel-icon pill shows source (voice/chat/email).  4. **Content area**      * Card list identical to agent workspace design – **reuse component tokens**.      * Copy button reveals “Copied ✓” toast inline (no global toast).  5. **Footer**      * Latency badge + Zendesk/SF logo toggle to show which API target the push goes to.  6. **Host-tool theming guidelines**      * No shadows; rely on 1 px mint border to delineate widget.      * Respect host font stack; fall back to Inter if none detected.  ---  ## 3 Technical integration brief (hand to front-end engineer)  | Layer | Approach | |-------|----------| | **Delivery** | Publish as Manifest v3 Chrome extension (Edge compatible). | | **Mounting** | `content.js` polls DOM for recognizable layouts (`#zendesk_root`, `.genesys-workspace-main`, etc.) then injects `<div id="fluxcx-widget"></div>` right before native sidebar. | | **Sandbox** | Render widget in React+Vite with Shadow DOM* to avoid CSS bleed (*fallback: CSS Module scoping). | | **APIs** | Background script maintains JWT with FluxCX API; communicates via `window.postMessage`. | | **Event hooks** | Listens for ticket ID changes → calls `/context` endpoint to refresh transcript & suggestions. | | **Error handling** | If host DOM not detected within 4 s show unobtrusive toast: “FluxCX widget not supported on this page.” |  ---  ## 4 Website section prompt (persuasive web design)  ``` Section title: “FluxCX meets your stack.”  Sub-headline (≤15 words): “Plug-in AI that lives inside Zendesk, Salesforce, and every leading contact-centre platform.”  Visual: • 3-screen collage (angled) – Zendesk ticket, Salesforce console, Genesys workspace – each with teal FluxCX sidebar highlighted. • Logos row: Zendesk, Salesforce, Genesys, NICE, Talkdesk, Freshdesk, Intercom, Amazon Connect (monochrome).  Copy bullets (✓): ✓ One-click Chrome add-on – no IT tickets   ✓ Same AI replies & summaries, wherever agents work   ✓ SOC 2 Type II, GDPR-ready  CTA: <Button variant="brand">Join wait-list →</Button>  SEO filename for hero: `[email protected]` ```  *Exclude* pricing, footers, or extra nav; keep page single-purpose for wait-list.  ---  ## 5 Deliverables checklist  1. **Figma**      * Widget component spec (collapsed + expanded).      * Landing-page “Meets your stack” section desktop & mobile.  2. **Chrome extension repo** (`fluxcx-widget/`)      * `manifest.json`, `content.js`, `background.js`, React build in `/dist`.  3. **Website update**      * New section inserted below initial fold on `/ai-copilot-beta`.      * Ally attribute: `<section aria-label="Platform integrations">`.  4. **Tracking**      * Add `data-event="integration_logo_click"` to each logo link (GA4).    Merge under feature flag `NEXT_PUBLIC_FLUX_WIDGET_PROMO=true`; keep existing functionality unchanged.
### **Design-refresh brief — Section “FluxCX meets your stack”**   *(turn the current mock-up into a polished, conversion-oriented hero with an embedded product demo)*    ---  #### 1 Objectives | Priority | What must improve | Why | |----------|------------------|-----| | 1 | **Visual clarity & hierarchy** (headline, benefits, CTA) | Current type/CTA compete with large widget mock-up → cognitive overload. | | 2 | **Embedded demo** above the fold | Persuasive principle: *“show, don’t tell”* boosts comprehension & intent. | | 3 | **Professional polish** (spacing, contrast, alignment) | Screenshot + copy feel disconnected; needs cohesive grid & brand consistency. |  ---  #### 2 Layout & content guidelines    | Zone | Spec | |------|------| | **A — Navigation (sticky, 64 px)** | 1-row *minimal* nav: word-mark + bolt → right-aligned CTA **“Install extension”** (brand teal #007C82). Hide “Product/Solutions/Pricing” on /ai-copilot-beta to keep focus. | | **B — Hero grid (12-col, 1280 px max)** | **Left 6 cols**<br>• H1 (Inter ExtraBold 48/52) → “FluxCX lives inside the tools you already use.”<br>• Subhead (H4 20/28, 400) ≤ 15 words → “AI replies & summaries in Zendesk, Salesforce & more—no migration needed.”<br>• Primary CTA “Install Chrome Extension →” (solid teal) <br>• Secondary CTA “Watch 90-sec demo” (ghost w/ ▲ play icon).<br><br>**Right 6 cols**<br>• **Interactive browser mock-up** (720 × 450 px)<br>&nbsp;&nbsp;— Plays muted looped MP4/GIF on hover/autoplay.<br>&nbsp;&nbsp;— Shows Zendesk ticket, agent clicks FluxCX tab, AI reply appears, pushes to Zendesk.<br>&nbsp;&nbsp;— Rounded 16 px, subtle shadow 0 12 32 rgba(0,0,0,.08). | | **C — Integrations strip** | Row of monochrome logos (48 px height, 24 px gap): Zendesk • Salesforce Service Cloud • Intercom • Genesys • NICE CXone. Tooltip on hover: “Works exactly the same in …”. | | **D — Trust footer (mini)** | SOC 2, GDPR chips inline under CTAs (14 px) → satisfy risk-averse CX personas without crowding. |  > **Mobile ≤ 640 px**   > • Stack blocks: demo video first, then headline/CTA (above-the-fold engagement).   > • CTAs full-width, 20 px vertical gap.    ---  #### 3 Visual style tokens   | Token | Value / Rule | |-------|--------------| | Brand teal | #007C82 (buttons, active states) | | Mint accent | #E3F0F1 (active tab underline) | | Text primary | #0E1E25 | | Background | #FFFFFF | | Shadow | 0 4 16 rgba(0,0,0,.06) (controls), 0 12 32 rgba(0,0,0,.08) (hero card) | | Radius | 8 px components; 16 px hero container | | Spacing | 8-pt grid; min 48 px outer padding desktop / 24 px mobile |  ---  #### 4 Micro-interaction & persuasion touches    * **Demo overlay** – when video ends, pause on frame with “AI Reply copied ✓” toast → proof of value.   * **CTAs** – add micro-arrow `→` that animates 4 px on hover (Framer Motion).   * **Logo hover** – brand teal tint + `data-event="integration_logo_hover"` for GA4.   * **Social proof deferred** – hide testimonial carousel until real quotes ready; avoids fake credibility issues.    ---  #### 5 Deliverables for designer / FE dev    1. **Figma**      * Desktop & mobile frames of the hero + integrations strip.      * Component styles (buttons, chips, video frame).    2. **Assets**      * 720×450 MP4 demo (loop 6 s, 2 MB max) + WebM fallback.      * SVG logos (monochrome #4B585E, 48 px height).    3. **Next.js implementation** (`/components/HeroWithDemo.tsx`)      * Uses `next/video` + `poster` image; LCP target < 1 s after first interact.      * Accepts props for headline, subhead, videoSrc, ctaHref (reuse across pages).    4. **Tracking hooks**      ```ts    onClickInstall => gtag('event','cta_install_extension', {location:'hero'});    onClickWatchDemo => gtag('event','cta_watch_demo');    ```    5. **QA checklist**      - [ ] Lighthouse ≥ 95 Perf / 95 Acc.      - [ ] Contrast passes WCAG 2.1 AA.      - [ ] Video lazy-loads below 1280 px wide, otherwise `preload="metadata"`.      - [ ] Mobile CLS < 0.1 (test iPhone SE).    Keep all existing page functions, forms, and wait-list mechanics unchanged.
generate a dashboard for github repo sync agent a plattform to manage your ai agents that will cater and update your selected github repos by runninng scheduled analysis and improvements in arhcitecture, code reviews, security and more and generate high quality pull requests
one premium feature is to generate tests and entire test reports that integrate with github actions workflow and are being maintained and automatically updated 
improve visual hierarchy and reduce clutter and information overload. ensure its a great design - like apple design very minimal and simple but beautiful and highly intuitive and functional
improve to have the quick action buttons not at the bottom of the dashboard but instead have a quick action widget or some better place of integrating them more prominently. Carefully think step by step about the best user experience and greatest experience fr developers and then update and improve the interface