Blog

How to set up a guestbook

Step 1: Create An account

Email guestbooks@kamiscorner.xyz asking for an invite. I will send you an email with an account creation link.
Click on the link, and create an account.

Step 2: Create a new guestbook

Go to your Dashboard.

Click on "View Guestbooks".
You will see text saying "No guestbooks yet. Go ahead and make one!".

Click on "Go ahead and make one!". Give your guestbook a name - this part is mandatory.
If you want to, you can fill out all the other fields here as well, but they aren't required to get your guestbook working.

When you're done, click "create guestbook".

Step 3: Embed your guestbook

On the guestbooks page on your dashboard, you should now see several links for your newly created guestbook.
Click on the "edit" link.
You now have two options:

If you are using a free bearblog account, or are on a different platform that does not support Javascript:
Scroll down to where it says "embed-code", and copy the contents of the textbox. It should look kind of like this:

<iframe src="https://guestbooks.kamiscorner.xyz/embed/guestbook/5234cf59-bfce-4dd2-9021-167f2af10f60" width="100%" height="500px" frameborder="0"></iframe>

If you are paying for bearblog premium, or are on a different platform that supports Javascript:
Scroll down to where it says "JS Embed Code (Experimental)", and copy the contents of the textbox. It should look kind of like this:

<script src="https://guestbooks.kamiscorner.xyz/api/embeds/example/embed.js"></script>
<style>
/* fake heading styles for guestbook entries*/
.h {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.2;

    margin-top: 0.7em;
    margin-bottom: 0.5em;

    scroll-margin-top: 80px; /* nice for anchor links */
}

.h1 {
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    letter-spacing: -0.02em;
}

.h2 {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    letter-spacing: -0.01em;
}

.h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
}

.h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
}

.h5 {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
}

.h6 {
    font-size: 1rem; /* 16px */
    font-weight: 600;
}
</style>
<!-- Guestbook Form -->
<div id="guestbooks___guestbook-form-container">
    <button class="guestbooks__captcha-switch">Switch Captcha Type</button>
    <form id="guestbooks___guestbook-form" 
        action="" 
        method="post">
        <div class="guestbooks___input-container">
            <input type="text" 
                    id="name" 
                    name="name" 
                    placeholder="name" 
                    required>
            </div>
            <input type="url" 
                id="website" 
                name="website" 
                placeholder="website (optional)">
            </div>
        </div>
        <div id="guestbooks___challenge-answer-container"></div>
        <div class="guestbooks___input-container">
            <textarea id="text" 
                name="comment" 
                placeholder="leave your message here..." 
                rows="4"
                style="width: 100%; box-sizing: border-box; resize: vertical;"
                required
            ></textarea>
            <p>Be reasonable, follow the <a target="_blank" href="https://guestbooks.kamiscorner.xyz/blog/tos">guestbook guidelines.</a></p>
            <p>Use of this service is subject to our <a target="_blank" href="https://guestbooks.kamiscorner.xyz/privacy-policy">privacy policy.</a></p>
        </div>
        <button type="submit">submit</button>
        <div id="guestbooks___error-message"></div>
    </form>
</div>
<!-- Attribution (optional but appreciated!) -->
<div id="guestbooks___guestbook-made-with" style="text-align: right; margin-top: 10px;">
<small>powered by <a href="https://guestbooks.kamiscorner.xyz" target="_blank">guestbooks</a></small>
</div>
<!-- Messages Section -->
<hr>
<h3 id="guestbooks___guestbook-messages-header">messages</h3>
<div id="guestbooks___guestbook-messages-container"></div>

Once you have copied the embed code for your platform:
Create a new page on your website, and paste the embed code. The guestbook will appear wherever you paste the code.

Congratulations, you're done!
If you find yourself having trouble with any of these steps, feel free to email me at guestbooks@kamiscorner.xyz.