Release Blast SDK Integration Guide

Welcome to the Release Blast SDK integration guide. This guide is designed to assist developers in seamlessly embedding Release Blast components into their websites. Follow the outlined steps to integrate our features into your project with ease.

Getting Started

To initiate the integration, include the Release Blast SDK script in your HTML file. Insert the following script tag at the end of your body section:

<script src="https://gzcatalyst-demo.pages.dev/gzcatalyst.js"></script>

Integration Methods

The Release Blast SDK offers versatile integration methods to incorporate release notes into your website. While direct element embedding is the default and popular method, we have also facilitated modal integration due to its increasing popularity among users.

Here, we detail these methods along with examples to guide you:

1. Direct Element Embedding

Direct element embedding is a popular and default method to integrate release notes natively within your website, akin to a native div. This method allows for a seamless integration, making the release notes appear as a natural part of your website. Here's a simple example:

<releasenote embedID="YOUR_EMBED_ID" width="100%" height="70vh" />

Attributes:

• embedID: Your unique embed ID.
• width: Specifies the width of the iframe (optional).
• height: Specifies the height of the iframe (optional).

Inside the dashboard, you have the flexibility to customize the appearance of the content within the <releasenote> element, tailoring it to match your website's aesthetics.

2. Utilizing the Provided Modal

Modals have become a popular choice for many users, offering a distinct space to present release notes without integrating them directly into the webpage's layout. To cater to this preference, we have simplified the modal integration process. Here's how you can do it:

<button id="releasenotebutton" data-token="YOUR_EMBED_ID" data-modal-width="70%" data-modal-height="90vh">Open Modal</button>

Attributes:

• data-token: Your unique embed ID.
• data-modal-width: Specifies the width of the modal (optional).
• data-modal-height: Specifies the height of the modal (optional).

Example: Crafting a Custom Modal

For advanced users seeking to craft a custom modal with a distinctive look and feel, this method is ideal. It involves creating your own JavaScript and CSS scripts, allowing for customization of the modal's presentation and behavior. Here is a basic template to get you started:

<button id="openModalBtn">Open Custom Modal</button>

<div id="modal" class="hidden">
    <div>
        <h2>Modal Header</h2>
        <button id="closeModalBtn">Close</button>
        <releasenote embedID="YOUR_EMBED_ID" width="100%" height="60vh" />
    </div>
</div>

<script>
    document.getElementById('openModalBtn').addEventListener('click', function() {
        document.getElementById('modal').classList.remove('hidden');
    });

    document.getElementById('closeModalBtn').addEventListener('click', function() {
        document.getElementById('modal').classList.add('hidden');
    });
</script>

<style>
    #modal::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: -1;
    }
</style>

        

Note: In the examples above, replace YOUR_EMBED_ID with your actual embed ID.

For further customization and advanced integrations, feel free to explore the custom modal creation. Should you have any queries or require further assistance, our support team is always at your disposal.

Happy coding!