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 embedding it on your website. There are a lot of things that 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 presente directly, it can happen that images or other components are not displayed correctly. This happens sometimes 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 window.ccInstance.reload method. You can do this directly on the button (<button onclick="window.cc.reinitialize()") or just calling the method via 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.