Tidigar Open Tidigar

Publish

Embed an interactive roadmap

Free Tidigar Business · Paid

Put a plan beside the explanation in your docs, wiki or website. Readers can move an activity, try a list edit and see the schedule respond, then open their own copy in Tidigar. Choose a snapshot for a published example, or a screen link for a view that follows the team's plan.

Try one plan in four views

The Board, Timeline, Flow and List below start from the same plan. Drag an activity in the timeline or edit a cell in the list and watch the other views follow. Select an activity to see where it appears in the other frames. Each view keeps its own presentation. 

<iframe
  src="https://embed.tidigar.com/#s=1.…"
  name="tidigar-theme-dark"
  title="Website launch – Plan by team"
  width="100%"
  height="480"
  style="border:0;max-width:100%"
  loading="lazy"
></iframe>
<p><a href="https://open.tidigar.com/s#s=1.…">Open in Tidigar: Website launch</a></p>
<script async src="https://embed.tidigar.com/assets/publisher.js?v=4779b404bdc0"></script>

These experiments stay on this page. They do not change the author's plan or another reader's copy. Choose Open in Tidigar inside a frame to take the plan as it currently appears into your own editor. Reloading this page starts the demonstration again.

Publish a copy on your page

  1. Open the plan in Tidigar and select the view readers should start with. Adjust its filters, search, grouping and timeline range before making the copy.
  2. Choose Share → Send a copy. In the browser, sign in if requested. Check what the copy includes using Sharing a plan; filtering the view alone does not remove hidden content.
  3. Choose Copy code under Embed code for a blog or website. Paste the whole result into a page block that accepts HTML, including iframes and scripts.
  4. Preview the published page. Check that the plan loads, the frame fits its content and Open in Tidigar opens the expected copy. Try the page at phone width too.
  5. When your original changes, copy fresh embed code and replace the old code on the page. Existing snapshot embeds keep their published version until you replace them.

The copied code contains a frame, an opening link and a small sizing script. Keep all three. Use the HTML or code block offered by your publishing platform, rather than pasting the code as ordinary text. Platform permissions and support vary; test the actual published page before relying on it. A preview inside a site editor can behave differently.

Show a view that follows later changes

For a team dashboard or intranet, open a Business plan you can edit, select a saved view and choose Share → Screens…. Create a screen of that view, then use its Copy code option. Save changes to the view first: the screen uses the stored view.

An embedded screen reads the latest published view about once a minute. Readers need no account to see it, and their experiments never write back to the shared plan. Its Open in Tidigar action leads toward the shared plan, where membership determines access; readers without access can choose to open a copy. Deleting the screen ends its link. Follow Screen links for access, updates, stories and lifecycle rules. Screens are part of paid Tidigar Business; a snapshot embed carries its own separate copy.

Show the same snapshot in several views

Copy the embed code with Timeline selected, switch to Board and copy it again. Paste both on the same page, as in the product launch plan. Use the same plan contents and the same copy options for both. Each link carries the plan and its own starting view. Changes to activities and the selected record travel between matching frames on that page, while each keeps its own view.

Capture the views before editing the plan again. Frames match their starting plan contents; two versions of a plan do not synchronize just because their names match. If you shorten one copy differently, it can also become a separate demonstration. When publishing an updated plan, replace all its frames together. This synchronization does not connect separate pages or readers, and it does not apply to embedded screens.

To explain a sequence of changes, add an animated story. One story can drive several views. Readers can stop it and explore, then replay from its opening state. Keep a written explanation beside the demonstration so the page also works without motion.

How embeds work in detail

Exploration stays in the frame

The embedded editor keeps its plan in memory and writes no plan to local storage. It supports direct manipulation and list edits, but leaves out the full editor's activity dialogs, Business controls and export tools. Use Open in Tidigar for further work in the editor. A snapshot frame's opening link follows its current plan and view, including story changes.

Reloading an ordinary snapshot embed loads the published starting plan again. Several matching frames on the same page can share their current state, so reloading just one frame may bring it back into step with the others. Reload the whole page to restart the example together.

The plan data travels in the snapshot address. Editing or deleting your original cannot recall that copy. See how sharing works for included content, shortening options, link limits and organisation rules. An embed's initial filter is a presentation choice; check the outgoing copy before publishing it.

Width belongs to the page; height follows the plan

The copied frame uses the full width of its container. Give that container enough space for the chosen view, and inspect narrow layouts: a wide list or a crowded board may need a different presentation. The sizing script adjusts the frame's height to the roadmap's reported content, within its supported range of 120 to 4,000 pixels. Avoid forcing a fixed height with your site's styles if you want this adjustment to work.

Without the script, the copied frame keeps its initial height of 480 pixels. If your platform removes the iframe too, the separate link can still open the published copy. During an animated story, the frame can grow to fit changes but does not shrink at every step.

Choose a theme for the surrounding page

By default, the roadmap follows the reader's light or dark preference. For a page that is always dark or always light, add name="tidigar-theme-dark" or name="tidigar-theme-light" to the iframe. Keep its descriptive title so readers using assistive technology can identify the embedded plan.

Connect your own opening button

Give a snapshot iframe a unique id, such as demo-plan, and add data-tidigar-open="demo-plan" to your opening link. Keep its href set to the complete original Tidigar share link. With the embed script loaded, that link follows the frame's current plan, including direct edits and story changes. Until the frame responds, or without the script, it opens the original published copy.

When several frames show the plan, name the frame whose view you want to open. The separate fallback link in ordinary copied code keeps its original address unless you bind it this way; the opening action inside the snapshot frame already follows its current state.

Check a missing or incomplete embed

Test both a first visit and a reload, using the page your readers will actually receive. Local demonstrations do not establish compatibility with every publishing platform.

Browse publishing options or all guides.