# Custom presentations - Handbook Custom presentations are PostHog's version of landing pages. They're designed to look like product slideshows, but can be more easily customized to include slides with custom content that span multiple products. They can be used to tailor content for: - a particular persona - the needs of a specific company - an individual > This is an MVP and ultimately needs to be refactored a bit. Check with [Cory Watilo](/community/profiles/30200.md) if you'd like to use this feature. The example below shows a presentation that is personalized for a particular company and includes the person within PostHog assigned to that account. ## Features - Sources slide structure and content from a json file (one per primary persona) - Custom presentations can source content from default slides but also override content to personalize it further - Can enrich with a target company using Clearbit - Supports some variables like `{companyName}` and `{companyLogo}` that can be used within slides - Connects with Salesforce to personalize the presentation with the assigned rep - Embeds a Default.com scheduling form - Supports a lead form - Can optionally hide slide thumbnails and presenter notes - And yes, they're fully responsive, and if an uploaded screenshot has a dark mode equivalent, it will be used in dark mode ## How it works Presentations are accessed via the URL pattern: PostHog AI ``` /for/{persona} /for/{company-domain}/{role-or-id} ``` **Examples:** PostHog AI ``` /for/product-engineers /for/engineering-managers /for/product-managers /for/engineering-managers /for/engineering-directors /for/example.com/product-engineers /for/example.com/123456 ## see "Overriding default content" below ``` The system will: 1. Look up company data from Clearbit (using the company's URL) 2. Load the appropriate presentation JSON 3. Render slides with company-specific data 4. Display sales rep information if available PostHog AI ``` src/ ├── components/Presentation/ │ ├── Templates/ # Slide templates │ │ ├── StackedTemplate.tsx │ │ ├── ColumnsTemplate.tsx │ │ ├── ProductTemplate.tsx │ │ ├── PricingTemplate.tsx │ │ └── BookingTemplate.tsx │ └── Utilities/ # Shared utilities └── presentations/ # JSON configuration files ├── default.json ├── product-managers.json ├── product-engineers.json ├── product-directors.json ├── engineering-managers.json └── dream-customers/ └── example.com.json ``` ### Presentation structure Here's a general structure for a presentation using the various templates. You can add multiple product slides by adding additional entries. See a full example on GitHub in [product-engineers.json](https://github.com/PostHog/posthog.com/blob/master/src/presentations/product-engineers.json). PostHog AI ``` { "name": "Product Engineers", "config": { "thumbnails": false, "notes": false, "form": true, "teamSlug": "sales-cs" }, "slides": { "overview": { "template": "stacked", "name": "Overview", "title": "Title goes here", "description": "

You can add the {companyName} and it will get inserted when enriched with Clearbit.

", "descriptionWidth": "@2xl:w-3/5" }, "error_tracking": { "template": "product", "name": "Error Tracking", "handle": "error_tracking", "screenshot": "home", "title": "Title goes here", "description": "

Description

" }, "all_in_one": { "template": "columns", "name": "All-in-one", "title": "Multiple products on one slide", "description": "Supports multiple columns of content", "content": [ { "handle": "product_analytics", "title": "Product Analytics", "description": "

Description goes here.

", "screenshot": "funnelVertical" }, { "handle": "session_replay", "title": "Session Replay", "description": "

Description goes here.

", "screenshot": "home" }, { "handle": "error_tracking", "title": "Error Tracking", "description": "

Description goes here.

", "screenshot": "errorsCropped" } ] }, "pricing": { "template": "pricing", "name": "Pricing", "title": "Pricing", "description": "PostHog offers usage-based pricing. This means you only pay for what you use, and you can set billing limits so you never get an unexpected bill.", "image": "/images/products/product-analytics/screenshot-billing.png" }, "cta": { "template": "booking", "name": "Get a demo", "title": "Get a demo", "description": "

No demos required – you can try PostHog without ever talking to us. But if you'd like personalized demo, book a time.

" } } } ``` ## Templates Different templates support different features. ### `stacked` Content is stacked top to bottom and optionally supports an `image` which replaces the default Hogzilla background image. The above example does not use the `image` prop, thus Hogzilla is included. PostHog AI ``` "overview": { "template": "stacked", "name": "Overview", "title": "Title goes here", "description": "

You can add the {companyName} and it will get inserted when enriched with Clearbit.

", "descriptionWidth": "@2xl:w-3/5" }, ``` ### `product` This imports the [`useProduct.ts`](https://github.com/PostHog/posthog.com/blob/master/src/hooks/useProduct.ts) hook to fetch product data based on the `handle` passed in. It allows it to access things like the product name, icon, color, and array of screenshots. In the above example, it uses the "[`home`](https://github.com/PostHog/posthog.com/blob/6b6eae68e9d5b8665b082d7809edfe645db4215f/src/hooks/productData/llm_analytics.tsx#L64)" screenshot from the `llm_analytics` product: PostHog AI ``` "llm_analytics": { "template": "product", "name": "LLM Analytics", "handle": "llm_analytics", "screenshot": "home", "title": "LLM Analytics", "description": "Understand how your users consume AI in your product, and monitor performance and cost when using different models." }, ``` ### `columns` This is a multi-column layout that supports multiple products or features side-by-side. > There is currently no logic to wrap items, so it works best for 2-4 columns for now. PostHog AI ``` "all_in_one": { "template": "columns", "name": "All-in-one", "title": "PostHog apps have great synergy", "description": "Identify a trend, see what happened, assign issues – all in one place.", "content": [ { "handle": "product_analytics", "title": "Product Analytics", "description": "

Easily uncover user friction by following the drop-offs in a funnel.

", "screenshot": "funnelVertical" }, { "handle": "session_replay", "title": "Session Replay", "description": "

Watch session recordings to understand friction in the user experience.

", "screenshot": "home" }, { "handle": "error_tracking", "title": "Error Tracking", "description": "

Assign issues to engineers to get user problems solved quickly.

", "screenshot": "errorsCropped" } ] }, ``` ### `pricing` PostHog AI ``` "pricing": { "template": "pricing", "name": "Pricing", "title": "Pricing", }, ``` ### `booking` PostHog AI ``` "cta": { "template": "booking", "name": "Get a demo", "title": "Get a demo", "description": "

No demos required – you can try PostHog without ever talking to us. But if you'd like personalized demo, book a time.

" } ``` ## Customization ### Overriding default content You can create an entirely personalized presentation, use the `dream-customers` folder. Set the json filename to the company's domain name and inside the file, set an arbitrary ID that will be used in the URL, like: PostHog AI ``` /for/hasura.io/123456 ``` Reference content from any persona file with `inherit`, or override the content by adding your own. PostHog AI ``` "overview": { "template": "stacked", "title": "Hey John!", "description": "We've prepared this custom presentation specifically for the Hasura team to show how PostHog can accelerate your product development." }, "error_tracking": { "inherit": "product-engineers", "slideKey": "error_tracking" }, "feature_management": { "inherit": "engineering-managers", "slideKey": "feature_flags" }, ``` ### Display options Use the `config` object in the JSON file that supplies the content for the presentation to customize how the presentation renders. This can be done for a persona, a specific company, or an individual. #### All properties PostHog AI ``` "config": { "thumbnails": false, // hides slide thumbnails column "notes": false, // hides presenter notes drawer "form": true, // shows the lead form "teamSlug": "sales-cs" // specifies which Small Team appears in the form } ``` The `thumbnails`, `notes`, and `form` values can be overridden in the query string (independently), like: PostHog AI ``` /for/product-engineers?thumbnails=false¬es=false&form=true ``` These configuration options are remembered when using the *Share your windows* link generator in the *Active windows* pane. This is useful for sending a link to someone that will open multiple windows *and also* remember the display options of a presentation. ### Product presentations The above properties also work for product presentations, like: PostHog AI ``` /llm-analytics?thumbnails=false¬es=false&form=true ``` ### Lead form The lead form is hidden by default but can be enabled in a persona's JSON file, or displayed manually using the query param `&form=true`. PostHog AI ``` "config": { "form": true, } ``` Non-personalized (industry-specific) landing pages show avatars of the[](/teams/sales-product-led.md) [](/teams/sales-product-led.md) [ ](/teams/sales-product-led.md) [Product-Led Sales East Team Product-Led Sales East Team](/teams/sales-product-led.md). Company-specific landing pages show the[](/teams/sales-cs.md) [](/teams/sales-cs.md) [ ](/teams/sales-cs.md) [New Business Sales Team New Business Sales Team](/teams/sales-cs.md) by default. This is because different URL patterns are intended for different purposes. | Path | Purpose | Team | | --- | --- | --- | | /for/{company}/{persona} | Outbound | New Business Sales Team | | /for/{persona} | Inbound | Product-Led Sales Team | #### Small team The small team in the `config` object can be overridden for any persona, company, persona within a specific company, or completely custom landing page. PostHog AI ``` "config": { "form": true, "teamSlug": "sales-cs" } ``` This can also be overridden to show a specific small team using `&t={id}` using mappings in the `TEAM_QUERY_MAP` in `src/components/Presentation/index.tsx` and works for product presentations, use case landing pages, personalized landing pages, and custom presentations. | ID | Small Team | | --- | --- | | 1 | sales-cs | | 2 | sales-product-led | On landing pages personalized to a specific company, we check if the account is assigned in Salesforce. This takes priority over any small team assignment in JSON and the `t` query param. ### Community questions Ask a question ### Was this page useful? HelpfulCould be better