Adding OTO's component with bundle

You need to add the next HTML to your page

Considerations:

1.- The th-oto tag must be inside a div with the id: “app”

2.- The script tag must be below the div with the id "app" not before

<div id="app">
  <th-oto id="oto_1719437253261"
	:classes='{
		"main":["block","md:block","lg:block"],
		"nodes":{
			"icon":{
				"normal":["inline-block","md:inline-block","lg:inline-block"],
				"hoverClasses":{"hover":[],"groupHover":[]}
			},
			"text":{
				"normal":["inline-block","md:inline-block","lg:inline-block"],
				"hoverClasses":{"hover":[],"groupHover":[]}
			}
		},
		"customClasses":[]
	}'
	:content='{
		"icon":"fas fa-dollar-sign",
		"text":"Yes! Add Offer to my Order!!",
		"offer_id":"d9f56174-8729-4539-af1e-44a0d4837eea",
		"show_icon":true,
		"icon_loading":"fas fa-spinner",
		"redirect_url":"",
		"hidden_inputs":[],
		"icon_to_right":false,
		"preload_bg_image":false
	}'
	offer-id='d9f56174-8729-4539-af1e-44a0d4837eea'
	page-id='[wf-page-id]'
	funnel-id='[wf-funnel-id]'
	next-page='[wf-next-page]'
  >
  </th-oto>
</div>
<script src="https://storage.googleapis.com/apps.thiioassets.io/js/oto_bundle_v1.js" defer></script>

1.- On the line 15, replace the text value

2.- On lines 16 and 24 replace the value for the offer variation uuid

You can add tailwind classes to the text through the “normal” value in line 11 and in the icon through the “normal” value in line 7

If you want to apply custom CSS rules you can use the selector

#[oto_id] .text /* for text */

#[oto_id] .icon /* for the icon */

(replace [oto_id] for the real id, in this example is #oto_1719437253261 .text or #oto_1719437253261 .icon)