Notion 教程

Notion 里嵌入习惯热力图,只需 3 步

从空白 Notion 页面到可点格打卡的 GitHub 风格热力图——不用 Zapier、不用换截图,大约 90 秒完成。

查看价格 →

无需注册、无需信用卡。一个链接,一秒开始。

🏃 Workouts

同一份示例数据 —— Pro 版六个主题,可滑动或等待 5 秒自动切换。

🏃 Workouts

339 active days · 71 day longest streak

🟢GitHub Green

MonWedFri
JunJulAugSepOctNovDecJanFebMarAprMay
Less
More

你会得到什么

在 Streakly 创建习惯热力图 → 复制嵌入链接 → 粘贴到 Notion 的 /embed 块。iframe 保持实时:在 Notion 里点某一天、输入数值,格子当场变色,无需跳转。

3 步操作(含具体界面名称)

  1. 1

    第 1 步:在 Streakly 创建热力图

    打开 streakly.org,先建一个免费试用 widget——第一个无需注册。

    • 点击首页「立刻体验 — 无需注册」(已有账号则进控制台)。
    • 选择类型时选「习惯热力图」(不要选旅行地图)。
    • 起个你能认出的名字,例如:运动、深度工作、阅读。
    • 可选:挑一套配色(默认绿色)。点击创建。
    • 进入编辑器后,点一下今天的格子,确认能打卡——方块应立刻填色。
  2. 2

    第 2 步:复制嵌入链接

    Notion 要的是 URL,不是截图。每个 widget 有固定的 iframe 地址。

    • 在编辑器找到「分享与嵌入」区域。
    • 确认 widget 可嵌入(公开列出或隐藏都可以——有链接就能在 Notion 里加载)。
    • 点击嵌入链接旁的「复制」。格式类似 https://streakly.org/embed/你的别名。
    • 保留这个标签页,下一步要粘贴到 Notion。
  3. 3

    第 3 步:粘贴进 Notion

    个人主页、习惯页、团队 wiki 等,只要支持嵌入块即可。

    • 打开要放热力图的 Notion 页面。
    • 输入 /embed,选择「嵌入」;部分版本选「链接到文件」再粘贴 URL。
    • 粘贴 Streakly 链接,等待 2–5 秒加载 iframe。
    • 若格子显得挤,把块拉成全宽——桌面端尤其建议全宽。
    • 测试:在嵌入里点一天,若弹出数字输入框,即成功。

Notion 专用技巧

尽量全宽

Notion 列宽小于约 400px 时会裁切年视图。单列布局或拖成全宽效果最好。

同事只能看、不能改

能打开 Notion 页的人都能看到热力图。只有你能打卡——私密 write token 不会出现在嵌入 URL 里。

手机端 Notion

手机 App 里也能在 iframe 中打卡,但编辑更方便用桌面。访客在手机上同样能看到图。

常见问题

Notion 免费版可以吗?

可以。标准「嵌入」块在所有套餐(含免费版)都可用。

能嵌多个习惯吗?

Pro / 终身版可无限创建 widget,每个习惯一条嵌入链接。免费版含 1 个热力图。

显示「拒绝连接」怎么办?

多为 URL 抄错或公司网络拦截 iframe。请从 Streakly 重新复制,确保以 https://streakly.org/embed/ 开头,并先在个人工作区测试。

你可能还感兴趣

准备好开始你的连胜了吗?

单个 widget 永久免费。一次付费,无限使用,终身更新。

查看价格 →
Notion 教程 — Streakly