Ventrata

Yes, the widget can be used in both modes on the same page at the same time. Follow these guidelines to implement it correctly:

Ensure the application <code>data-config</code> DOES NOT contain the <code>“embedded”: true</code> attribute in the script.

You can use either the <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> tags, which will contain the <code>ventrata-checkout</code> attribute and its <code>data-config</code>. While you may specify the “embedded”: false attribute, it is not required as this is the default setting.

Refer to the <a href="https://support.ventrata.com/en/articles/9550610-web-checkout-implementation-guide#h_1ce3dde9b3">Implementation Guide</a> for more details.

Use the <code>&lt;aside&gt;</code> tag to define the widgets’s <code>width</code> and <code>height</code>. Add the <code>ventrata-embedded-widget</code> attribute along with the widget’s <code>data-config</code>. Be sure to specify the <code>“embedded”: true</code> attribute to enable embedded mode.

- Default Configuration:
 Ensure the application <code>data-config</code> DOES NOT contain the <code>“embedded”: true</code> attribute in the script. 
 
- Pop-up mode: 
 You can use either the <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> tags, which will contain the <code>ventrata-checkout</code> attribute and its <code>data-config</code>. While you may specify the “embedded”: false attribute, it is not required as this is the default setting. 
 Refer to the <a href="https://support.ventrata.com/en/articles/9550610-web-checkout-implementation-guide#h_1ce3dde9b3">Implementation Guide</a> for more details.
 
- Embedded mode: 
 Use the <code>&lt;aside&gt;</code> tag to define the widgets’s <code>width</code> and <code>height</code>. Add the <code>ventrata-embedded-widget</code> attribute along with the widget’s <code>data-config</code>. Be sure to specify the <code>“embedded”: true</code> attribute to enable embedded mode. 
 Refer to the <a href="https://support.ventrata.com/en/articles/9550610-web-checkout-implementation-guide#h_1ce3dde9b3">Implementation Guide</a> for more details.