How to's

Managing images in Notion

How does Bullet optimize images in the background?

Converting images into Links

1. Hover over the image and click • or ⋮⋮.

2. Select Add link → Paste a URL or choose a Notion page.

Note that selecting a Notion page won't create a backlink.

Adding alt text for images.

• Hover over the image and click the three dots menu.

• Select Alt text → Enter a description → press Enter to save.

Advanced image control attributes

• :height=”120px”
• Change the height of the image

• :width=”180px”
• Change the width of the image

• :loading=”eager”

How to unpublish an existing page

1. Disable the Publish property in Notion. This is the easiest way to control if the page should appear directly from Notion. Any database page which has the property called “Publish” and unchecked will not be published.

2. For the database collection page, sometimes the database collection page is not easily controllable in Notion. For these pages, you can turn off “Show Database pages” option inside Themes > Database views.

3. You can also turn off pages that you don’t want to be published under Page Settings > Publish.

How to Add Buttons in the Notion website

Notion’s “/button”

Bullet Button

Note: Bullet only adds the bullet-btn class, and the style is managed in the templates. If you're not using our templates, you'll need to add custom CSS to make the link look like a button.

Common Mistake: Sometimes, users find the button doesn't work because the square brackets should be part of the hyperlink, not outside it.

Show database views as Tabs

/* render database views as tabs */

.notion-collection-view-dropdown-content {
    display: flex;
    box-shadow: none;
    align-items: center;
    justify-content: start;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0 auto !important;
 }

 .notion-collection-view-dropdown-content-item-active-icon>svg {
    display: none !important;
 }

 .notion-view-type>svg{
    display: none !important;
 }

 .notion-collection-view-type-title{
    overflow: unset;
 }

 .notion-collection-view-dropdown-content-item {
    padding: 10px 20px 10px 20px;
    border-radius:5px;
    box-shadow:0px 0px 0px 2px black;
    color: white !important;
 }

 .notion-collection-view-dropdown-content-item:focus,

 .notion-collection-view-dropdown-content-item-active {
    background-color:black;
    color: white !important;

}

 .notion-collection-view-dropdown-content-item-active>.notion-collection-view-type>.notion-view-type>.notion-collection-view-type-title{
    color: white !important;
 }

 .dropdown {
    display: block;
 }

.dropdown-trigger {
    display: none;
 }

.dropdown-menu {
    display: block;
    position: unset;
    z-index: 99;
}

 .dropdown-content{
    background: unset;
 }

 .notion-collection-view-dropdown-content{
    padding: 25px 0px 25px 0px;
 }

 .notion-collection-header{
    display: flex;
    justify-content: start;
    padding-left: 90px;
    align-items: center;
    margin: 10px 0px 60px 0px;
 }

 .notion-collection-view-dropdown-content {
    display: flex;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;

 }

Prevent the discovery of the Notion Page

• First, you have to enable the Randomize Notion Block ID for your site. Go to Dashboard > Settings and scroll down to the "Randomize Notion Block ID" section.

• Once you enable the option, the randomized Notion ID will be generated instead of your original Notion ID, and click Save.

How to use different templates in different pages?

• Apply different templates to different pages of the same website.

• Apply a template to only a specific page and keep other pages as the default Notion design.

Step 1: Move the current template code from global to page-specific

Step 2: Copy the new template code into a different page

How to add a custom search bar

1. Add the following code inside a code block on your Notion page. Below the code block, include a caption labelled as a bullet:HTML

<div class="bullet-search">
    <div class="panel is-link bullet-panel">
        <div class="panel-block">
            <p class="control has-icons-left">
                <span class="icon is-left">
                    <svg xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24" stroke-width="2"
                        stroke="currentColor" style="width: 1.2rem; height: 1.2rem;">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
                    </svg>
                </span>
                <input data-origin="" id="bullet-search-input" class="input bullet-search-input" type="text"
                    placeholder="Search...">
            </p>
        </div>
    </div>
</div>

1. Copy and paste the following custom code inside "Code" > "CSS"

.panel {
            border-radius: 20px;
            }

            .notion-custom-code .panel {
                border-radius: 50px;
            }

            .bullet-panel .panel-block{
                border: unset;
            }

            .panel{
            	box-shadow: 0px 0px 3px 0px lightgray;
            }

            .notion-custom-code {
            	width: 100%;
            }

            .has-icons-left {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .is-left svg {
                width: 1.5rem !important;
                height: 1.5rem !important;
                color: var(--fg-color-6);
            }

            input::placeholder {

                font-size: 1.3rem;

                color: var(--fg-color-6);

            }

            .bullet-search-input {
                font-size: 1.3rem;
                padding-left: unset;
            }

            .control.has-icons-left .icon {
                position: unset;
            }

            .control.has-icons-left .input {
                padding-left: unset;
            }

            .notion-custom-code .bullet-panel {
                margin-top: 0px;
            }

            @media(min-width: 800px){
            	.notion-custom-code .bullet-panel{
            		max-width:66vw;
            	}
            }

How to embed forms in Notion and Bullet?

How to Embed a Notion Form in bullet site

Step 1: Create Your Form in Notion

1. Create your form in Notion by typing /forms inside a page.

2. Add all required fields and configure the form the way you want.

3. Click on Share form and make it public.

4. Copy the public URL of the form from the Share option.

Step 2: Embed the form Inside the Notion Page

1. Create a new** Notion page** where you want the form to appear.

2. Give the page a clear title like “Contact Form” or “Request Form.”

3. Paste the copied form link into the page.

4. Choose Embed when Notion asks how to display the link.

Step 3: How to Link form page in notion button

1. Open the Notion page where you want to link the form.

2. Click on the existing Button block (or create a new button).

3. Open the Button Settings.

4. Click on New Action and choose “Open Page, form, or URL.”

5. Select the Notion page where your form is embedded.

Embed Tally forms in the Notion website using Bullet.

1. Create your Tally form and click Publish.

2. Navigate to the Share tab and choose the Standard option.

3. Adjust the embed settings to your preference.

4. Click Copy embed link.

5. On your Notion page, type the /embed command and paste the link.

Beehive newsletter signup form on the Notion website

1. Log in to Beehiiv and create a custom subscribe form.

2. Go to the Subscribe Forms page → Click "View" next to your form.

3. Choose an embed option (Full Width, Fixed Width, Slim Embed) and copy the code.

4. Open Notion → type /embed and select the "Embed" option.

5. Paste the copied embed code into the URL field.

Embed Your Substack Newsletter Form in Notion website.

1. Sign up with your email to receive a magic login link. Click the link to log in.

2. Enter your Substack newsletter URL → click the "Add" button. Customize the embed using options on the left.

3. Click the " Embed Code" button at the bottom left, then select the Notion tab and copy the link.

4. Open Notion → /embed to paste the ink and click create embed.

Embed Mailchimp email form in Notion website.

• Go to your Mailchimp Campaigns and click the down arrow next to the campaign → select "Social Share → Copy campaign URL.

• Open the Notion page where you want to embed the campaign. Type /embed or just / and select the "Embed" block.

• Paste the Mailchimp campaign link into the Embed block and click the "Embed link" button.

Guide to Embedding Content in Notion and Bullet

Embed Videos, PDFs and other files.

Embed directly in Notion

1. Type /embed in notion → Choose and upload files from your device.

2. The uploaded or linked file will now appear in both Notion and your Bullet site.

Embed via Google Drive

1. Upload video to Google Drive

2. Click Share, set access to " Anyone with the link," and copy the Share URL.

3. In Notion, type /video or /embed → paste the Share URL.

Similarly, embed Youtube videos, images, PDFs, and other media files into Notion.

1. Click Share on the post and select Copy link.

2. In your Notion page, either type /embed and paste the link or paste it directly and choose Embed.

Sell product using Gumroad

1. Copy your Gumroad product or store profile URL

2. Paste the link to your Notion page

3. Select Create embed.

To create a scrollable carousel for a gallery view

1. Create a medium gallery view and name it. .bullet-carousel

2. If you don't want the cards to be clickable, add a Publish property and uncheck it

3. To set up redirects, add a URL property named bullet:Link and insert your desired redirect URL

Add the carousel script

<script>

const ARROW_RIGHT_IMAGE = `<svg width="35" height="36" viewBox="0 0 35 32" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path d="M7.29167 19.243H24.5875L19.2937 25.6013C19.1712 25.7488 19.0789 25.919 19.0221 26.1021C18.9653 26.2852 18.9451 26.4778 18.9627 26.6687C18.9982 27.0543 19.1855 27.41 19.4833 27.6576C19.7811 27.9051 20.1651 28.0242 20.5507 27.9887C20.9363 27.9531 21.292 27.7658 21.5396 27.468L28.8313 18.718C28.8803 18.6484 28.9242 18.5753 28.9625 18.4993C28.9625 18.4263 29.0354 18.3826 29.0646 18.3097C29.1307 18.1425 29.1653 17.9645 29.1667 17.7847C29.1653 17.6049 29.1307 17.4269 29.0646 17.2597C29.0646 17.1868 28.9917 17.143 28.9625 17.0701C28.9242 16.994 28.8803 16.9209 28.8313 16.8513L21.5396 8.10133C21.4025 7.93671 21.2308 7.80433 21.0367 7.71359C20.8426 7.62285 20.6309 7.57599 20.4167 7.57633C20.0759 7.57567 19.7457 7.69434 19.4833 7.91175C19.3357 8.03418 19.2136 8.18453 19.1241 8.35421C19.0347 8.52388 18.9795 8.70953 18.9619 8.90054C18.9443 9.09155 18.9646 9.28416 19.0215 9.46733C19.0784 9.6505 19.171 9.82064 19.2937 9.968L24.5875 16.3263H7.29167C6.90489 16.3263 6.53396 16.48 6.26047 16.7535C5.98698 17.027 5.83333 17.3979 5.83333 17.7847C5.83333 18.1714 5.98698 18.5424 6.26047 18.8159C6.53396 19.0894 6.90489 19.243 7.29167 19.243Z" fill="currentColor"/>

</svg>`;

const SCROLL_AMOUNT = 350;

const toggleBtns = (collection, currentScroll, maxScroll) => {
    const prevButton = collection.querySelector(".carousel-btn-prev");
    const nextButton = collection.querySelector(".carousel-btn-next");
    prevButton.disabled = currentScroll <= 0;
    nextButton.disabled = currentScroll >= maxScroll;
};

const carouselCollections = Array.from(
    document.querySelectorAll(".notion-collection"),
).filter((el) => {
    const galleryView = el.querySelector(".bullet-carousel");
    return galleryView !== null || galleryView !== undefined;
});

const initCarousel = () => {
    Array.from(carouselCollections).forEach((collection) => {
        if (!collection) return;
        const galleryView = collection.querySelector(".notion-gallery-grid");
        galleryView.classList.add("db-bullet-carousel");

        const carouselFragment = document.createDocumentFragment();
        const carouselButtonContainer = document.createElement("div");
        carouselButtonContainer.classList.add("carousel-container");

        const prevButton = document.createElement("button");
        prevButton.classList.add("carousel-btn-prev");
        prevButton.innerHTML = ARROW_RIGHT_IMAGE;
        prevButton.style.transform = "rotate(180deg)";
        prevButton.disabled = true;
        prevButton.addEventListener("click", () => {
            scrollCarousel("left", collection);
        });

        const nextButton = document.createElement("button");
        nextButton.classList.add("carousel-btn-next");
        nextButton.innerHTML = ARROW_RIGHT_IMAGE;
        nextButton.style.marginTop = "7px";

        nextButton.addEventListener("click", () => {
            scrollCarousel("right", collection);
        });

        carouselButtonContainer.appendChild(prevButton);
        carouselButtonContainer.appendChild(nextButton);
        carouselFragment.appendChild(carouselButtonContainer);
        collection.appendChild(carouselFragment);
    });
};

const scrollCarousel = (direction, collection) => {
    const galleryGrid = collection.querySelector(".notion-gallery-grid");
    if (!galleryGrid) return;
    let currentScroll = galleryGrid.scrollLeft;
    const maxScroll = galleryGrid.scrollWidth - galleryGrid.clientWidth;
    const calculateTargetScroll = (
        direction,
        currentScroll,
        scrollAmount,
        maxScroll,
    ) => {

        if (direction === "right") {
            return Math.min(currentScroll + scrollAmount, maxScroll);
        } else {
            return Math.max(currentScroll - scrollAmount, 0);
        }
    };

    let targetScroll = calculateTargetScroll(
        direction,
        currentScroll,
        SCROLL_AMOUNT,
        maxScroll,
    );

    galleryGrid.scrollLeft = targetScroll;
    toggleBtns(collection, targetScroll, maxScroll);
};

const addScrollEvent = () => {
    carouselCollections.forEach((coll) => {
        const notionGalleryGrid = coll.querySelector(".notion-gallery-grid");

        if (notionGalleryGrid !== undefined) {

            const updateButtonsState = () => {
                const currentScroll = notionGalleryGrid.scrollLeft;
                const maxScroll = notionGalleryGrid.scrollWidth - notionGalleryGrid.clientWidth;
                const prevButton = document.querySelector('.carousel-btn-prev');
                const nextButton = document.querySelector('.carousel-btn-next');
                if (!prevButton || !nextButton) {
                    return;
                }
                prevButton.disabled = currentScroll <= 0;
                nextButton.disabled = currentScroll >= maxScroll;
            };
            notionGalleryGrid.addEventListener('scroll', updateButtonsState)
        }
    })
}

document.addEventListener("DOMContentLoaded", () => {
    initCarousel();
    addScrollEvent();
});

</script>

:root {

    --card-width: 320px;

    --card-gap: 50px;

}

.db-bullet-carousel {
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
    grid-auto-flow: column;
    gap: var(--card-gap);
    overflow-x: auto;
}

.db-bullet-carousel .notion-collection-card {
    width: var(--card-width);
}

.coll-Carousel .notion-gallery-grid {
    transition: scroll-behavior 0.5s ease-in-out;
}

.carousel-btn-next,
.carousel-btn-prev {
    border: none;
    background: var(--bg-color);
    color: var(--navbar-btn-bg-color);
    opacity: 0.6;
}

.carousel-btn-next:hover,
.carousel-btn-prev:hover {
    opacity: 1;
}

.carousel-btn-prev:disabled,
.carousel-btn-next:disabled,
.carousel-btn-prev:disabled:hover,
.carousel-btn-next:disabled:hover {
    opacity: 0.2;
}

.notion-gallery-grid {
    scroll-behavior: smooth;
}

Output:

How to unhide an element or <H1> tag

How to Unhide an Element or <H1> Tag Using Block Editor in Bullet.so

1. Open the page you want to edit.

2. Go to Design section and select any block

3. In the right-side Layers panel, locate and select the element you want to unhide (e.g., Notion Title or any other block).

4. Click on Design, navigate to the Layout section.

5. Under Show/Hide, select “ Show” to make the element visible on your site.

6. Save and publish your site to apply the changes.

📝 Tip: You can use the Layers panel to quickly find and manage visibility for nested or overlapping elements.

How to Unhide an Element or <H1> Tag Using Block Editor in Bullet.so (Legacy Method)

1. Open the page you want to edit.

2. Click on any block to enable the Block Editor

1. In the right-side Layers panel, locate and select the element you want to unhide (e.g., Notion Title or any other block).

1. In the Block Editor, navigate to the Layout section.

1. Under Show/Hide, select “ Show” to make the element visible on your site.

1. Save and publish your site to apply the changes.

📝 Tip: You can use the Layers panel to quickly find and manage visibility for nested or overlapping elements.

Video Customization in Bullet

1. Upload Video

:loop="true" :autoPlay="true" :muted="true"

💡 Note: These video attributes should be added in the video caption of your Notion page. They won’t appear visually on your website but will control the video’s behavior.

2. Embed via URL

<https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&controls=0&loop=0>

?autoplay=1&mute=1&controls=0&loop=0

• autoplay=1 → Video starts automatically

• mute=1 → Video is muted

• controls=0 → Player controls are hidden

• loop=0 → Video does not loop

Note: Use 1 for true and 0 for false. You can combine multiple parameters using &.

How to Customize Mobile/Tablet Layout Without Affecting Desktop

1. Open your site in the Bullet editor.

2. In the top toolbar, set the Preview Device to Mobile or Tablet.

3. Make your changes directly in that selected view.

4. These changes will apply only to the chosen device layout.

5. Your Desktop layout will remain unaffected.

How to Exclude Your Own Visits from Analytics

Steps to Exclude Your Own Visits:

1. Open your website in your browser.

2. Open the Developer Console:
• Press F12 or Ctrl + Shift + I (or Cmd + Option + I on Mac)

3. This will open the Developer Tools. Navigate to the Console tab.

4. If you're in a different tab like "Network" or "Elements," click on "Console" to switch.

5. In the Console, paste the following line of code and hit Enter:

localStorage.setItem('umami.disabled', 'true')

1. Refresh the page. Your visits will now be excluded from tracking on that browser.

• This setting only applies to the specific browser and device where it was set.

• If you use a different browser or device, repeat these steps there.

• This is especially helpful for internal team visits, QA testing, or development environments.

How to Set Up Subscription-Based Page Access

1. Create a Payment Link

• Create a Product → Price → Payment Link.

• Copy the generated payment link.

• Create a Product.

• Copy the product link.

2. Create a Premium Segment in Bullet

1. Go to your Site Dashboard → Membership

2. If Membership is enabled, you’ll see a “Segments” option

3. Click “Create Segment” and name it something like Premium Users

4. This segment will be used to control access to protected pages for paying users

3. Automate Segment Assignment with Zapier

• Trigger: Stripe – Checkout Session Completed

• Action: Bullet – Add user to segment
• Segment: Premium Users
• Email: Use the email from Stripe

• Trigger: Gumroad – New Sale

• Action: Bullet – Add user to segment

4. Redirect Users After Payment

• Set the Post-payment Redirect URL to your protected page or a thank-you page that links to the protected page.

“Please enter the same email you used for payment to access your premium content.”

5. Email Verification via Bullet

• Bullet shows an email input screen.

• The user enters their email → Bullet sends a verification link.

• Once verified, if their email is in the Premium Users segment, they’ll get access.

How to upload a custom file

Uploading Custom Files

1. Go to Site Settings → Domain → Files → Ads.txt

2. In the input field, enter the full file path. Example: /ads.txt

3. Upload your file directly using the upload interface.

Legacy User

1. Go to Settings → Files → Ads.txt section.

2. In the input field, enter the full file path. Example: /ads.txt

3. Upload your file directly using the upload interface.