renderWidget(product, configs)

This method renders the Subify subscription widget for a specific product and in a specific element of the current page:

window.subifySdk.renderWidget("product-handle",
{renderPosition:{wrapper:".widget-wrapper"}}
)

Params

Product: The product for which the widget will be rendered. You can specify the product in two ways:

Product Handle (String): A string representing the product handle. The product handle is a unique identifier used in the URL of the product page. It's typically a user-friendly, URL-safe version of the product name. For example, for a product named 'Classic Blue Jeans', the product handle might be 'classic-blue-jeans'.

Shopify Product Object: This object should conform to the structure defined by Shopify's API, containing all relevant product details, including its ID, name, description, and other attributes.

configs: This parameter provides options for advanced customization and flexible configuration, enabling precise control over the widget's positions and functionality during the rendering process.

{
  renderPosition?: {
    wrapper: string;
    position: "APPEND" | "PREPEND";
  };
  sellingPlanInput?: {
    wrapper: string;
    id?: string;
  };
  useCardApi?: boolean;
}

renderPosition: An object that specifies the exact location on the page where the widget will be rendered.

wrapper	The selector for the wrapper element within which the widget will be rendered
position	This option specifies whether the widget should be inserted as the first child ('PREPEND') or the last child ('APPEND') of the wrapper element. The value must be either 'APPEND' or 'PREPEND'.

sellingPlanInput: An object that specifies various options related to the selling plan input.

<input type="hidden" name="selling_plan" value="692456128832">

wrapper	The selector for the wrapper element within which the input will be rendered
id	to specify id for selling plan input element

useCardApi: You can enable this option if you want the SDK to automatically include the selling_plan value in your 'Add to Cart' API payload.

Use this option with caution, as the SDK will modify browser data-fetching utilities such as 'fetch' and ‘XHR’. After enabling this option, ensure that all functionalities of your website are working correctly.