Skip to content

Commit 8056e48

Browse files
committed
Improve docs look and feel and update assets
- Improve the overall look and feel - Add darkmode logo support - Add two styles for images: "border" and "browser" - Replace all images in "Billing and subscription" with new styles - Replace all images in "Get started" with new styles - Replace all images in "Website settings" with new styles - Replace the first 6 tabs in "Stats dashboard" with new styles - Replaced images of the more complex flows with videos
1 parent b9eaf9b commit 8056e48

82 files changed

Lines changed: 732 additions & 182 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

docs/add-website.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ Does your site operate on multiple subdomains such as `docs.yourdomain.com` and
1010

1111
If you'd like to track a particular subdomain independently from the rest of your site, you can do that too. For example, if the subdomain you want to track on its own is `https://blog.yourdomain.com` then the part to enter in the "**Domain**" field is `blog.yourdomain.com`.
1212

13-
<img alt="Add your website details to Plausible Analytics" src={useBaseUrl('img/website-details.png')} />
13+
<div class="browser">
14+
<img alt="Add your website details to Plausible Analytics" src={useBaseUrl('img/v2/website-details.webp')} />
15+
</div>
1416

1517
:::tip Domain doesn't necessarily need to match the actual domain
1618
You don't necessarily need to install our snippet on the same domain as the domain you have added to your Plausible account. Think of the domain field in Plausible more like a site ID rather than an exact match. This allows you more flexibility in your setup all depending on your situation.

docs/billing.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ Credit/debit card, PayPal, Apple Pay and Google Pay. All payment processing is h
2020

2121
If paying via PayPal, make sure a valid card is linked to your PayPal account. Paddle requires this for recurring subscriptions.
2222

23-
<img alt="Apple Pay & Google Pay payment methods" src={useBaseUrl('img/plausible-apple-pay.png')} />
23+
<img class="border" alt="Apple Pay & Google Pay payment methods" src={useBaseUrl('img/v2/plausible-apple-pay.webp')} />
2424

2525
## How do I add my VAT number?
2626

2727
During checkout, you can add your company address and VAT ID. Paddle handles all sales taxes. If you're eligible, no VAT will be charged.
2828

2929
If you didn't add it during checkout, open any Paddle invoice and click "**Add address & VAT Number**". [More on Paddle's VAT handling →](https://paddle.com/support/which-countries-does-paddle-charge-vat-for/)
3030

31-
<img alt="Add VAT number at checkout" src={useBaseUrl('img/add-vat-number-during-checkout.png')} />
31+
<img class="border" alt="Add VAT number at checkout" src={useBaseUrl('img/v2/add-vat-number-during-checkout.webp')} />
3232

3333
## How do I change my VAT number?
3434

@@ -64,6 +64,8 @@ If you downgrade to a lower tier, you'll see a negative immediate payment amount
6464

6565
In your account settings, go to the "**Subscription**" section. Under "**Next bill amount**", click "**Update billing info**".
6666

67-
<img alt="Update Plausible billing information" src={useBaseUrl('img/account-settings-update-billing-info.png')} />
67+
<div class="browser">
68+
<img alt="Update Plausible billing information" src={useBaseUrl('img/v2/account-settings-update-billing-info.webp')} />
69+
</div>
6870

6971
Have a billing question not covered here? [Contact us](https://plausible.io/contact).

docs/cancel-subscription.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,16 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
66

77
Log in to your Plausible account. In the top right menu, click your account name → "**Account Settings**".
88

9-
Go to the "**Subscription**" section and click "**Cancel my subscription**".
9+
Go to the "**Subscription**" section and click "**Cancel plan**".
1010

11-
<img alt="Cancel your Plausible subscription" src={useBaseUrl('img/account-settings-cancel-subscription.png')} />
11+
<div class="browser">
12+
<img alt="Cancel your Plausible subscription" src={useBaseUrl('img/v2/account-settings-cancel-subscription.webp')} />
13+
</div>
1214

1315
After canceling:
1416

15-
* Your stats **keep being counted** and you have full access until the end of your current billing period.
16-
* Once the billing period ends, your stats dashboard will be locked but your data is **not deleted**. If you resubscribe later, everything will still be there.
17-
* If you change your mind before the period ends, you can resubscribe from the same "**Subscription**" section.
17+
- Your stats **keep being counted** and you have full access until the end of your current billing period.
18+
- Once the billing period ends, your stats dashboard will be locked but your data is **not deleted**. If you resubscribe later, everything will still be there.
19+
- If you change your mind before the period ends, you can resubscribe from the same "**Subscription**" section.
1820

1921
Want to switch to a different plan instead of canceling? See [Change your subscription plan](change-plan.md).

docs/change-domain-name.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,21 @@ Use the [site ownership transfer](transfer-ownership.md) functionality instead
1414

1515
Here's how to change the domain name of a site in your Plausible account:
1616

17-
* Go to the "**General**" section of the [website settings](website-settings.md) in your Plausible account
17+
- Go to the "**General**" section of the [website settings](website-settings.md) in your Plausible account
1818

19-
* Click on the "**Change domain**" button in the "**Site domain**" section
19+
- Click on the "**Change domain**" button in the "**Site domain**" section
2020

21-
<img alt="Change domain name in Plausible" src={useBaseUrl('img/change-domain.png')} />
21+
<div class="browser">
22+
<img alt="Change domain name in Plausible" src={useBaseUrl('img/v2/change-domain.webp')} />
23+
</div>
2224

23-
* Type in your new domain name. Please, remove `https` and `www` from the domain, just keep the hostname (`yourdomain.com`). For example, if your new domain is `https://www.yourdomain.com` then the part to enter in the "**Domain**" field is `yourdomain.com`
25+
- Type in your new domain name. Please, remove `https` and `www` from the domain, just keep the hostname (`yourdomain.com`). For example, if your new domain is `https://www.yourdomain.com` then the part to enter in the "**Domain**" field is `yourdomain.com`
2426

25-
* Click on the "**Change domain**" button to proceed with the domain name change
27+
- Click on the "**Change domain**" button to proceed with the domain name change
2628

27-
* After a successful domain change, we will attempt to visit your new domain in order to advise you on the next steps (which depend on how you've set up Plausible). You should see a loading spinner while the process is ongoing, and a tailored recommendation once it finishes. Note that the same information is available in step 1 of the checklist below. We recommend you to go over that checklist to make sure your entire Plausible integration will continue working as before.
29+
- After a successful domain change, we will attempt to visit your new domain in order to advise you on the next steps (which depend on how you've set up Plausible). You should see a loading spinner while the process is ongoing, and a tailored recommendation once it finishes. Note that the same information is available in step 1 of the checklist below. We recommend you to go over that checklist to make sure your entire Plausible integration will continue working as before.
2830

29-
* Note that once you change the domain in your Plausible site settings, you may have to take additional steps to ensure your Plausible integration continues to work seamlessly. Please see the [list below](#domain-change-checklist).
31+
- Note that once you change the domain in your Plausible site settings, you may have to take additional steps to ensure your Plausible integration continues to work seamlessly. Please see the [list below](#domain-change-checklist).
3032

3133
## Domain change checklist
3234

@@ -77,4 +79,3 @@ Stats API requests depend on the domain as an argument. API requests made after
7779
### 3. Ensure you update bookmarked and shared links
7880

7981
As soon as you change the domain in Plausible, any links to your site analytics dashboard or site settings that you might have bookmarked or shared will stop working. These will be available at the new root URL `https://plausible.io/<your_new_domain>`. There is no automatic redirect in place from the old root URL to the new one.
80-

docs/change-plan.md

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,28 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
66

77
Log in to your Plausible account. In the top right menu, click your account name → "**Account Settings**".
88

9-
Go to the "**Subscription**" section and click "**Change plan**".
9+
Go to the "**Subscription**" section and click the "**Change plan**" button.
1010

11-
<img alt="Change Plausible Plan" src={useBaseUrl('img/account-settings-change-plan.png')} />
11+
<div class="browser">
12+
<img alt="Change Plausible Plan" src={useBaseUrl('img/v2/account-settings-change-plan.webp')} />
13+
</div>
1214

1315
Select your new plan, tier and billing frequency (monthly or yearly), then click "**Preview changes**".
1416

15-
<img alt="Preview plan changes" src={useBaseUrl('img/preview-plan-changes.png')} />
17+
<div class="browser">
18+
<img alt="Preview plan changes" src={useBaseUrl('img/v2/preview-plan-changes.webp')} />
19+
</div>
1620

1721
You'll see a summary of the change:
1822

19-
* **Immediate charge** - a pro-rated amount reflecting what you've already paid and the time remaining on your current cycle. A negative amount means you have a credit balance that will automatically reduce your upcoming payments until it's used up.
20-
* **Next renewal** - the date and amount of your next regular payment.
23+
- **Immediate charge** - a pro-rated amount reflecting what you've already paid and the time remaining on your current cycle. A negative amount means you have a credit balance that will automatically reduce your upcoming payments until it's used up.
24+
- **Next renewal** - the date and amount of your next regular payment.
2125

2226
Click "**Confirm plan change**" to apply.
2327

24-
<img alt="Confirm plan change" src={useBaseUrl('img/confirm-plan-change.png')} />
28+
<div class="browser">
29+
<img alt="Confirm plan change" src={useBaseUrl('img/v2/confirm-plan-change.webp')} />
30+
</div>
2531

2632
Your subscription renews automatically and you can change or [cancel](cancel-subscription.md) at any time.
2733

docs/compare-stats.md

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Compare your stats over time
44

55
import useBaseUrl from '@docusaurus/useBaseUrl';
66

7-
You can gain valuable insights and a fresh perspective on your website traffic by comparing stats over time. Our comparison feature allows you to analyze the stats of a specified date range and compare them to another period.
7+
You can gain valuable insights and a fresh perspective on your website traffic by comparing stats over time. Our comparison feature allows you to analyze the stats of a specified date range and compare them to another period.
88

99
"**Previous period**", "**Year over year**" and "**Custom period**" comparisons are all available. The comparison is matched by day of the week by default to avoid any discrepancies caused by the weekend. You can also optionally match by date.
1010

@@ -14,31 +14,37 @@ You can choose between different chart intervals to display the comparison the w
1414

1515
Here's how to track your progress and identify trends by comparing your stats:
1616

17-
* Select your primary date range using the date picker in the top right of your dashboard or by using one of our [keyboard shortcuts](keyboard-shortcuts.md)
17+
- Select your primary date range using the date picker in the top right of your dashboard or by using one of our [keyboard shortcuts](keyboard-shortcuts.md)
1818

19-
* Then select "**Compare**" in the date picker or press the "**X**" key [on your keyboard](keyboard-shortcuts.md) to enable the comparison feature
19+
- Then select "**Compare**" in the date picker or press the "**X**" key [on your keyboard](keyboard-shortcuts.md) to enable the comparison feature
2020

21-
<img alt="Date picker for the compare feature" src={useBaseUrl('img/date-picker-compare-feature.png')} />
21+
- This will enable a new comparison drop-down. "**Previous period**" is our default option but you can also compare trends "**Year over year**" or a completely "**Custom period**" too
2222

23-
* This will enable a new comparison drop-down. "**Previous period**" is our default option but you can also compare trends "**Year over year**" or a completely "**Custom period**" too
23+
<div class="browser">
24+
<video autoPlay loop muted controls width="100%">
25+
<source src={useBaseUrl('/video/compare-stats-over-time.mp4')} type="video/mp4" />
26+
</video>
27+
</div>
2428

25-
<img alt="Compare your stats over time" src={useBaseUrl('img/compare-your-stats-over-time.png')} />
29+
- The comparison uses "**Match day of the week**" by default to align the comparison by day of the week. You can select "**Match exact date**" in the comparison drop-down to match by date instead
2630

27-
* The comparison uses "**Match day of the week**" by default to align the comparison by day of the week. You can select "**Match exact date**" in the comparison drop-down to match by date instead
31+
- The comparison will be shown on the top chart of your Plausible dashboard. You can see the stats for both the primary and the secondary date ranges in the chart. You can hover over to see the percent changes in the tooltip. As with everything else on the dashboard, we'll save your comparison preference for your next visit to save you a click or two
2832

29-
* The comparison will be shown on the top chart of your Plausible dashboard. You can see the stats for both the primary and the secondary date ranges in the chart. You can hover over to see the percent changes in the tooltip. As with everything else on the dashboard, we'll save your comparison preference for your next visit to save you a click or two
33+
<div class="browser">
34+
<img alt="Comparison chart" src={useBaseUrl('img/v2/comparison-chart.webp')} />
35+
</div>
3036

31-
<img alt="Comparison chart" src={useBaseUrl('img/comparison-chart.png')} />
37+
- Want to disable the comparison and get back to the regular view? Press the "**X**" key on your keyboard or choose "**Disable comparison**" in the comparison drop-down
3238

33-
* Want to disable the comparison and get back to the regular view? Press the "**X**" key on your keyboard or choose "**Disable comparison**" in the comparison drop-down
34-
35-
<img alt="Disable comparison" src={useBaseUrl('img/disable-comparison.png')} />
39+
<div class="browser">
40+
<img alt="Disable comparison" src={useBaseUrl('img/v2/disable-comparison.webp')} />
41+
</div>
3642

3743
### Segment your audience
3844

3945
First, filter the dashboard in any way you want to [segment your audience](filters-segments.md). Filter by a group of pages, traffic from organic search sources or visitors from a specific geographical region. Then enable the comparison feature to analyze that particular audience segment over time and compare it to a different date range.
4046

41-
### Choose a chart interval
47+
### Choose a chart interval
4248

4349
In the top right of the chart itself, you can choose the unit of time the stats on the chart are grouped by. This gives you a more granular comparison view. The available interval options depend on the date range you've selected. For example, if you select "Last 30 days" as your primary date range, you can display the stats by day or by week.
4450

@@ -48,11 +54,11 @@ Our comparison matches by day of the week by default. This means that your prima
4854

4955
The alternative option in the comparison drop-down is to "**Match exact date**". When choosing Sunday January 1st to January 7th 2023 as the primary date range and matching by exact date, the year over year comparison will be against Saturday January 1st to January 7th 2022.
5056

51-
<img alt="Match exact date" src={useBaseUrl('img/comparison-match-exact-date.png')} />
52-
5357
But when "**Match day of the week**" is selected, the comparison will be against Sunday January 2nd to January 8th 2022 instead. It's still compared to the same amount of time but the secondary date range is aligned by day of the week to get more accurate data.
5458

55-
<img alt="Match day of the week" src={useBaseUrl('img/comparison-match-day-week.png')} />
59+
<div class="browser">
60+
<img alt="Match exact date" src={useBaseUrl('img/v2/comparison-match-exact-date.webp')} />
61+
</div>
5662

5763
## Available comparison options
5864

@@ -68,6 +74,6 @@ Your primary date range will be compared to the same period of the previous cale
6874

6975
### Custom period
7076

71-
Your primary date range will be compared to whatever custom period you select. The custom period can be the same amount of time as the primary date range but it can be longer or shorter too.
77+
Your primary date range will be compared to whatever custom period you select. The custom period can be the same amount of time as the primary date range but it can be longer or shorter too.
7278

7379
You can compare whatever primary date range you want with whatever custom period you want. This is useful for seasonal holidays, marketing campaigns or any other unique goals and objectives that you have.

docs/consolidated-views.md

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
66

77
If you have multiple websites in your Plausible account, the "**Consolidated View**" gives you an overview of traffic across all of them. This allows you to quickly see the total number of visitors and other key metrics across all your properties in one place.
88

9-
It looks just like any other Plausible dashboard, but the data includes all your sites instead of just one. This way you can get detailed insights into individual site performance and a holistic view of your whole network too.
9+
It looks just like any other Plausible dashboard, but the data includes all your sites instead of just one. This way you can get detailed insights into individual site performance and a holistic view of your whole network too.
1010

11-
<img alt="Consolidated traffic view" src={useBaseUrl('img/consolidated-view.png')} />
11+
<div class="browser">
12+
<img alt="Consolidated traffic view" src={useBaseUrl('img/v2/consolidated-view.webp')} />
13+
</div>
1214

1315
## When a consolidated view is useful
1416

1517
- If you're building multi-tenant applications, offering [a white label analytics dashboard](https://plausible.io/white-label-web-analytics) or a similar service.
16-
1718
- If you are managing several brands or domains, you will be able to check total visitors, top sources, and important trends across all your sites at once.
1819

1920
- It helps you oversee a network of blogs or microsites so you can spot which sites grow fastest, which ones slow down, and where to focus content or marketing effort.
@@ -30,15 +31,17 @@ When you add a new site to your team, it will automatically be included in the c
3031

3132
Just like a regular site, a consolidated view has its own settings. You can access the settings directly from the /sites page, or the site picker menu on the top left of the consolidated dashboard.
3233

33-
<img alt="Consolidated traffic view" src={useBaseUrl('img/consolidated-view-settings.png')} />
34+
<div class="browser">
35+
<img alt="Consolidated traffic view" src={useBaseUrl('img/v2/consolidated-view-settings.webp')} />
36+
</div>
3437

3538
### Timezone
3639

3740
You can change the timezone used for your consolidated stats. By default, it uses the timezone set for the majority of your sites. It might be helpful to choose a timezone that matches how you normally review performance.
3841

3942
### Goals
4043

41-
To see conversions on your consolidated dashboard, add your [goals](https://plausible.io/docs/goal-conversions) manually, just like you would on a regular site.
44+
To see conversions on your consolidated dashboard, add your [goals](https://plausible.io/docs/goal-conversions) manually, just like you would on a regular site.
4245

4346
### Custom properties
4447

docs/download-invoices.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
66

77
Our payment processor Paddle sends an invoice by email automatically after each payment. You can also download invoices directly from your Plausible account.
88

9-
Log in and go to your account name → "**Account Settings**". In the "**Invoices**" section, you'll see a list of all invoices with a download link for each one.
9+
Log in and go to your account name → "**Account Settings**". Scroll down in the "**Subscription**" section to see a list of all invoices. Each invoice can be downloaded directly from the list.
1010

11-
<img alt="Download Plausible invoice" src={useBaseUrl('img/download-invoice.png')} />
11+
<div class="browser">
12+
<img alt="Download Plausible invoice" src={useBaseUrl('img/v2/download-invoice.webp')} />
13+
</div>
1214

1315
## Add your company address and VAT number
1416

0 commit comments

Comments
 (0)