TrueWatch | Observe Beyond with Next-Gen Observability

How to write product price page in MDX

This article demonstrate how to write product price page in mdx and its related components

Customized Components

Since we have different types of products with different prices, I have created several components to help. This tutorial will show you how to use these components.

SimplePrice

SimplePrice is the basic unit of product prices, it has 4 props prefix, amount, unit and additionalInfo, it is usually used in single-price product. here is an example of SimplePrice:

<SimplePrice 
   prefix="APPROX" 
   amount="0.09" 
   unit="per host, per month *" 
   additionalInfo="*Billed daily, The cost is based on the amount of metrics collected by data agent." 
/>

Props	Type	Default	Description
`prefix`	`string` (optional)	`-`	prefix of the product price
`amount`	`number\|string` (required)	`-`	the exact price of the product per unit
`unit`	`string` (optional)	`-`	the unit of product price e.g. `per host, per month`
`additionalInfo`	`string` (optional)	`-`	additional information added to the price

DynamicPrices

DynamicPrices is used in products with multiple prices, e.g. products with multiple storage strategies. This component has 3 props unit, additionalInfo and defaultActiveIndex, all props are optional, and its children must be an array of SimplePrice. Below is an example of DynamicPrices:

<DynamicPrices unit="per 1 million traces *" defaultActiveIndex={1} additionalInfo="*Billed daily, The cost is based on the amount of metrics collected by data agent." >
   <SimplePrice prefix="3-day data storage" amount={0.9} additionalInfo="New additional information" />
   <SimplePrice prefix="7-day data storage" amount={1.4} />
   <SimplePrice prefix="14-day data storage" amount={2.8} />
   <SimplePrice prefix="30-day data storage" amount={5.14} />
   <SimplePrice prefix="60-day data storage" amount={9.2} />
</DynamicPrices>

Props	Type	Default	Description
`unit`	`string` (optional)	`-`	This is the default unit of the product price, if the multiple prices share the same unit, you can specify `unit` here, then you can omit the `unit` prop in `SimplePrice`; or you can specify `unit` prop inside `SimplePrice` which will overwrite the default unit
`defaultActiveIndex`	`number` (optional)	`0`	This prop controls which price to show by default, it is zero-based, by default its value is 0
`additionalInfo`	`string` (optional)	`-`	additional information added to the price, can be overwritten by the `additionalInfo` configured inside `SimplePrice`

PriceCard

PriceCard is used if the product price requires a title or a brief description, it is usually used in combination with SimplePrice and DynamicPrices, it has 2 props title and description.
Below is an example of PriceCard and SimplePrice:

<PriceCard title="Profiles" description="Pay-As-You-Go">
   <SimplePrice prefix="3-day data storage" amount={0.06} unit="per 10k profiles *"/>
</PriceCard>

Another example of PriceCard and DynamicPrices:

<PriceCard title="Traces" description="Pay-As-You-Go">
    <DynamicPrices unit="per 1 million traces *" defaultActiveIndex={1}>
      <SimplePrice prefix="3-day data storage" amount={0.9} />
      <SimplePrice prefix="7-day data storage" amount={1.4} />
      <SimplePrice prefix="14-day data storage" amount={2.8} />
      <SimplePrice prefix="30-day data storage" amount={5.14} />
      <SimplePrice prefix="60-day data storage" amount={9.2} />
    </DynamicPrices>
</PriceCard>

Props	Type	Default	Description
`title`	`string` (optional)	`-`	price card title
`description`	`string` (optional)	`-`	brief description of the price card

PriceCards

PriceCards is used in product with multiple PriceCard, its children must be an array of PriceCard. Below is an example of how PriceCards is used in combination with PriceCard:

<PriceCards>
  <PriceCard title="Traces">
    <DynamicPrices unit="per 1 million traces *" defaultActiveIndex={1}>
      <SimplePrice prefix="3-day data storage" amount={0.9} />
      <SimplePrice prefix="7-day data storage" amount={1.4} />
      <SimplePrice prefix="14-day data storage" amount={2.8} />
      <SimplePrice prefix="30-day data storage" amount={5.14} />
      <SimplePrice prefix="60-day data storage" amount={9.2} />
    </DynamicPrices>
  </PriceCard>
  <PriceCard title="Profiles">
    <DynamicPrices unit="per 10k profiles *">
      <SimplePrice prefix="3-day data storage" amount={0.06} />
      <SimplePrice prefix="7-day data storage" amount={0.09} />
      <SimplePrice prefix="14-day data storage" amount={0.14} />
    </DynamicPrices>
  </PriceCard>
</PriceCards>

ProductBenefits

For list element inside ProductBenefits, it will automatically add a a gray background and a green checked icon in front of every list item. It has one optional prop - title, which will add a title to the list element. Below is an example of ProductBenefits:

<ProductBenefits title="My List Title">
- **End-to-End Distributed Tracking** <br /> Trace every request path across each of its components, from front-end devices to back-end services.
- **Dynamic Application Performance Evaluation** <br /> Monitor real-time performance metrics to identify and resolve service bottlenecks instantly.
- **Code-Level Diagnosis** <br /> Dive deep into execution efficiency, method, and thread-level details to locate and fix performance issues.
- **Root Cause Analysis** <br/> Uncover anomalies with multi-layered insights into logs, networks, hosts, and code.
</ProductBenefits>

Props	Type	Default	Description
`title`	`string` (optional)	`-`	title of the product benefits list

Button

Button has 4 props size, variant, position and addditionalInfo. Please check the examples below to see how these props control the behaviour of Button element:

Props	Type	Default	Description
`position`	`enum` (`"default"\|"center"\|"end"`)	`"default"`	the position of the button in a line

<Button position='default'>
Position - default
</Button>
 
<Button position='center'>
Position - center
</Button>
 
<Button position='end'>
Position - end
</Button>

Props	Type	Default	Description
`size`	`enum`(`"default"\|"sm"\|"lg"`)	`"default"`	controls the padding and text size of the button `default` - 16px (mobile) 18px (pc) `sm` - 14px (mobile) 16px (pc) `lg` - 18px (mobile) 20px (pc)

<Button position='center' size="default">
Size - default
</Button>
 
<Button position='center' size="sm">
Size - sm
</Button>
 
<Button position='center' size="lg">
Size - lg
</Button>

Props	Type	Default	Description
`variant`	`enum` (`"default"\|"link"`)	`"default"`	control the color, border and background of the button

<Button position='center' variant="default">
Variant - default
</Button>
 
<Button position='center' variant="link">
Variant - link
</Button>

additionalInfo will adding some descriptive information below the button, here we suggest setting position="center" when the button has additionalInfo

Props	Type	Default	Description
`additionalInfo`	`string`(optional)	`-`	additional information to describe the button

<Button position='center' additionalInfo="*Billed daily, estimated 600 time series per day per host">
[GET STARTED FREE](/request-demo)
</Button>

QA, Question, Answer

QA, Question and Answer are the components used to create the common questions section of the product. These three components must be used together. Please check the example below to learn how to use these components:

<QA>
  <Question>How do you define pay-as-you-go pricing in monitoring?</Question>
  <Answer>
  Truewatch's pay-as-you-go pricing model is highly reasonable, as it is entirely based on the volume of data reported by the Data Agent (DataKit). Think of it like using a metered utility service—you're charged only for what you consume. For example, if you use 5 units, you pay for 5 units; if you don't use any, you pay nothing. In this model, Truewatch's listed prices represent the unit price per volume of data.
  </Answer>
 
  <Question>How do you define timeseries?</Question>
  <Answer>
  A timeseries represents a unique combination of tags associated with a metric, such as CPU usage. Each unique pair of tags constitutes a distinct timeseries. For example:
  - Metric: CPU usage, host: Singapore_test1, project: Truewatch
  - Metric: CPU usage, host: Oregon_test1, project: Truewatch_us
 
  In this case, there are 2 distinct timeseries. Essentially, a timeseries is used to differentiate monitoring dimensions based on the combination of tags linked to a metric, independent of the frequency or timing of measurements.
  </Answer>
 
  <Question>How do I collect metrics?</Question>
  <Answer>
  Truewatch DataKit is a lightweight data collection agent designed to gather metrics, logs, and traces from all sources for monitoring and analysis. It supports multiple input plugins, enabling it to collect data from different systems and apps.
 
  For detailed instructions, visit the official documentation.
  </Answer>
</QA>

Full Example

After showing you all the customised components, below is a full example of a product price page in mdx format, you can copy the code and apply this template to other product price page

## Application Performance Monitoring (APM)
End-to-end insights for application performance, pinpointing issues down to a specific line of code.
---
 
<PriceCards>
  <PriceCard title="Traces">
    <DynamicPrices unit="per 1 million traces *" defaultActiveIndex={1}>
      <SimplePrice prefix="3-day data storage" amount={0.9} />
      <SimplePrice prefix="7-day data storage" amount={1.4} />
      <SimplePrice prefix="14-day data storage" amount={2.8} />
      <SimplePrice prefix="30-day data storage" amount={5.14} />
      <SimplePrice prefix="60-day data storage" amount={9.2} />
    </DynamicPrices>
  </PriceCard>
  <PriceCard title="Profiles">
    <DynamicPrices unit="per 10k profiles *">
      <SimplePrice prefix="3-day data storage" amount={0.06} />
      <SimplePrice prefix="7-day data storage" amount={0.09} />
      <SimplePrice prefix="14-day data storage" amount={0.14} />
    </DynamicPrices>
  </PriceCard>
</PriceCards>
 
<ProductBenefits title="Product Benefit">
 
- **End-to-End Distributed Tracking** <br /> Trace every request path across each of its components, from front-end devices to back-end services.
- **Dynamic Application Performance Evaluation** <br /> Monitor real-time performance metrics to identify and resolve service bottlenecks instantly.
- **Code-Level Diagnosis** <br /> Dive deep into execution efficiency, method, and thread-level details to locate and fix performance issues.
- **Root Cause Analysis** <br/> Uncover anomalies with multi-layered insights into logs, networks, hosts, and code.
 
</ProductBenefits>
 
<Button position='center' additionalInfo="*Billed daily. The cost is based on the amount of traces collected by DataKit. 
**The cost is based on the amount of profiles collected by DataKit">
[START MONITORING](/request-demo)
</Button>
 
---
 
#### Multi-Year/Volume Discounts Available
<Button variant="link" position="center">
[CONTACT US](/contact-us)
</Button>
 
---
 
### Features
 
<ProductFeatures>
- Full-Link Distributed Tracking and Detailed Heat Maps
- Dynamic Performance Monitoring
- Code-Level Error Diagnosis
- Service Relationship Maps
- Health Status Visualization
</ProductFeatures>
 
---
 
### Support Plans
From basic plans to bespoke offerings, TrueWatch offers the right level of support for any organization.
<Button variant="link" position="center">
[LEARN MORE ABOUT OUR SUPPORT PLANS](/support-services)
</Button>
 
---
 
### Common Questions
 
<QA>
  <Question>How do you define pay-as-you-go pricing in monitoring?</Question>
  <Answer>
  Truewatch's pay-as-you-go pricing model is highly reasonable, as it is entirely based on the volume of data reported by the Data Agent (DataKit). Think of it like using a metered utility service—you're charged only for what you consume. For example, if you use 5 units, you pay for 5 units; if you don't use any, you pay nothing. In this model, Truewatch's listed prices represent the unit price per volume of data.
  </Answer>
 
  <Question>How do you define timeseries?</Question>
  <Answer>
  A timeseries represents a unique combination of tags associated with a metric, such as CPU usage. Each unique pair of tags constitutes a distinct timeseries. For example:
  - Metric: CPU usage, host: Singapore_test1, project: Truewatch
  - Metric: CPU usage, host: Oregon_test1, project: Truewatch_us
 
  In this case, there are 2 distinct timeseries. Essentially, a timeseries is used to differentiate monitoring dimensions based on the combination of tags linked to a metric, independent of the frequency or timing of measurements.
  </Answer>
 
  <Question>How do I collect metrics?</Question>
  <Answer>
  Truewatch DataKit is a lightweight data collection agent designed to gather metrics, logs, and traces from all sources for monitoring and analysis. It supports multiple input plugins, enabling it to collect data from different systems and apps.
 
  For detailed instructions, visit the official documentation.
  </Answer>
</QA>

PRICING

Pay Only for What You Use. Transparent and Flexible Pricing.