How to dynamically change the widget content

ℹ️

This section requires some basic programming knowledge. Share it with your web developer.

It might be a case that you would like to change the widget's content dynamically based on your website logic (for example to highlight the user's active plan).

To solve this, we provide an interface which you could use to change the widget's content and state from your code.

Basic usage could look like:

<body>
  <script
    defer
    src="<your Enhanci widget script>"
  ></script>
  <div id="enhanci-pricing-widget"></div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      window.Enhanci.onReady(() => {
        window.Enhanci.setTextUnderButton(1, 'This is your active plan')
        window.Enhanci.setActiveCard(1)
      })
    })
  </script>
</body>

Let's break it down:

if you would like to call it on the page load, you should use document.addEventListener('DOMContentLoaded') listener, it ensures that the JS bundle has loaded.

Then, you should call window.Enhanci.onReady callback to ensure you call Enhanci methods once it's ready.

You might not need to use document.addEventListener('DOMContentLoaded') or window.Enhanci.onReady if you call Enhanci methods after the page loaded. In this case just calling the methods should work.

Available methods

`window.Enhanci.setTextUnderButton(cardIdx, text)`

Change the text under the button.

Takes 2 arguments:

cardIdx: index of a plan (starting from 1)
text: new text

`window.Enhanci.setActiveCard(cardIdx)`

Highlight the plan.

Takes 1 argument:

cardIdx: index of a plan (starting from 1)

`window.Enhanci.clearActiveCard()`

Clear the highlighted plan.

Takes no arguments.

ℹ️

If you need more available methods please contact us https://enhanci.com/contact (opens in a new tab)

Introduction How to Use Enhanci for Pricing Table