Show Toast

Description

The showToast action displays a brief, non-intrusive notification at the bottom of the app screen.
It’s typically used to inform users about quick events like “Added to cart”, “Item saved”, or “Action successful” — without interrupting their flow.

Function Signature

VajroSDK.actions.showToast({ 
	title: 'String',
	message: 'String',
})

Parameter	Type	Required	Description
title	String	Yes	The title of the Toast Message
message	String	Yes	The content to be displayed in the Toast

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Toast displayed successfully" }`
Invalid Params	`{ "status": "error", "errorId": 400, "errorHandle": "invalid-params", "message": "Invalid params" }`
Unexpected Error	`{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }`

Example Usage

const variant_to_be_added=VajroSDK.variables.product.selectedVariant.id;
function addItemToCart(variantId, quantity) {
    VajroSDK.actions.addToCart([{ variantId, quantity }])
        .then(() => {
            VajroSDK.actions.showToast({
                title: "Congratulations!!!",
                message: "You have unlocked an exclusive offer!!"
            });
        })
        .catch((err) => {
            VajroSDK.actions.showToast({
                title: "Error",
                message: "Failed to add item to cart."
            });
            console.error("Add to cart error:", err);
        });
}
document.getElementById("openCartButton").addEventListener('click',()=>{
	// Example usage
	addItemToCart(variant_to_be_added, 1); // Replace "12345" with the actual variant ID
})

<div class="cart-container" id="ct">
  <button class="open-cart-btn" id="openCartButton">Add to Cart</button>
</div>

.cart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.open-cart-btn {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.open-cart-btn:hover {
  background-color: #218838;
}

Best Practices

Use for lightweight feedback: Avoid using toasts for critical or blocking messages.
Keep text concise: Limit messages to one or two short sentences.
Avoid chaining: Don’t trigger multiple toasts simultaneously — queue if needed.
Consistent usage: Use type colors consistently across the app for predictable UX.
Do not overuse: Frequent toast messages can overwhelm users.

Caveats

Non-blocking UI: Toasts don’t pause user actions — they appear over the current view.
Auto-dismiss only: Users cannot manually close the toast.
App-only context: Works only inside the Superfans mobile app.
Async behavior: Always handle Promises to avoid unhandled errors.