Troubleshooting

Make sure your page is public. Your sidebar is likely using the files prop supplied via a template, which deliberately only contains public files, to avoid accidentally exposing private data to a live website.

Oftentimes, embed snippets use plain HTML syntax, including for inline CSS styles. Here is an example from Airtable:

<iframe
  src="https://airtable.com/embed/..."
  style="background: transparent; border: 1px solid #333" />

However, Motif uses JSX syntax, which require the style prop to be a JavaScript key-value object, and not a string as above. The above example should therefore be rewritten as follows:

<iframe
  src="https://airtable.com/embed/..."
  style={{
    background: "transparent",
    border: "1px solid #333"
  }} />

Do a hard refresh of the page . If the problem persists, open the browser console, and look for errors. If there are none, try to clear the browser cache. If the problem is still there, ping us on Discord.

It usually takes a little time (up to a few hours) before the first events appear on the Google Analytics dashboard.

Motif uses JSX syntax, which require the style prop to be a JavaScript key-value object, and not a string as in HTML. So instead of

<div style="background-color: red" />

you should write

<div style={{ backgroundColor: "red"}} />

Notice how the key is turned from kebab case (background-color) to camel case (backgroundColor).

If your images are hosted elsewhere than on Motif, we may not be able to perform image optimizations, such as serving the image at the right resolution and precomputing the aspect ratio to prevent Cumulative Layout Shift. One solution is to upload your images on Motif (simply drag and drop them into the editor). This allows Motif to do the required optimizations (leveraging Next.js' Image component) and serve images fast to visitors of your site.

When you paste a link on LinkedIn, even before sharing it, LinkedIn stores the page metadata instantly. Unfortunately, if you subsequently change your SEO tags (such as the title or cover image), LinkedIn does not clear the cache, and you will still see the old values showing up. One workaround that currently works is to paste the same link, but add a character at the end of the link, such as ?, that still opens up the same page. This will trick LinkedIn to think it's a new page, and load the updated SEO metadata.

Head over to the project settings , go to the Pages tab and untoggle "Include footer".

These are warnings and hints generated by the active Remark plugins. You can disable them by editing the .remarkrc.js file located at the root of your project. Learn more about Remark plugins

Try to reset the app data. In Chrome and Brave, open the browser console, choose the Application tab, then the Storage tab, and hit "Clear site data":

In Firefox, open the settings, navigate to Privacy & Security, and hit "Clear Data". In Safari, open the settings, navigate to Privacy and hit "Manage Website Data...". Choose "motif.land" and hit "Remove all".

On some browsers, such as Chrome, pages named something with "analytics", like "Page Analytics" get treated specially, perhaps by ad trackers. This issue has been filed on the Next.js project. It usually works in incognito mode. Due to the unpredictable behavior of browsers, we recommend you name your pages something different.