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:

• Embed via an iFrame (easiest)
• Fix the issue by overwriting specific styles via Custom CSS

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.