Embedding Appearance Issues

Learn how you can solve certain appearance issues on embedded calculators

Sometimes a calculator looks great in our editor but has issues when embedded on your website. There are a lot of things that can go wrong when you embed a calculator because the calculator works in an "uncontrolled environment" (your website).

Issues include:

  • Images are not displayed correctly
  • Fonts look different
  • There is too much or too little whitespace

CSS Overwrites

These issues are mostly caused by CSS overwrites on your website. There are two fixes for this:

Calculator is not presented directly

When embedding a calculator that's not presented directly, it can happen that images or other components are not displayed correctly. This sometimes happens when displaying a calculator from inside a modal. There are two ways to fix this:

  • When clicking the button to display the modal, call the javascript>window.ccInstance.reload method. You can do this directly on the button (markup><button onclick="window.cc.reinitialize()">Click to open the modal</button>) or just calling the method via javascript (javascript>window.ccInstance.reload())

  • Make sure the inside of the modal is not rendered until it's shown on the screen. You need technical skills to accomplish this, but it's a solution that doesn't require calling the reload method.

Related articles

Learn more about appearance issues in one of the following articles