# renderWidget(product, configs)

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

```javascript

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](https://shopify.dev/docs/api/admin-graphql/2024-01/objects/Product#field-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](https://shopify.dev/docs/api/liquid/objects/product): 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.

\
\&#xNAN;**`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.

```typescript
{
  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.

<table data-header-hidden data-full-width="false"><thead><tr><th width="194.5"></th><th></th></tr></thead><tbody><tr><td>wrapper</td><td>The selector for the wrapper element within which the widget will be rendered</td></tr><tr><td>position</td><td>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'.</td></tr></tbody></table>

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

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

<table data-header-hidden><thead><tr><th width="198"></th><th></th></tr></thead><tbody><tr><td>wrapper</td><td>The selector for the wrapper element within which the input will be rendered</td></tr><tr><td>id</td><td>to specify id for selling plan input element</td></tr></tbody></table>

**`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.

{% hint style="danger" %}
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.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://subify-1.gitbook.io/sdk/subify-sdk-for-developers/subifysdk-object-methods/renderwidget-product-configs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.