If your editor isn’t loading properly, it may be due to one of the reasons mentioned in this article.
You haven’t used the AB Tasty Chrome add-on
If the editor doesn’t load, you should try using the AB Tasty Chrome add-on. This extension forces your page to load fully before applying the editor, which solves a lot of common problems encountered with loading the editor. The add-on is available in the Chrome web store. You can download it here.
To use the Chrome add-on, follow these steps:
- Go to the URL you want to load in the editor
- Open the AB Tasty Chrome add-on
- Select your campaign
- Ensure the Reset JS behaviors option is ticked
- Click Editor
Third-party cookies are blocked in the browser
The AB Tasty tag doesn’t require third-party cookies but loading the editor does. If you are having issues loading it, it might be due to third-party cookies being blocked.
How to find out and what to do
Paste the following address into your Chrome URL bar: chrome://settings/content/cookies and make sure that your browser accepts cookies or, at least, that HTTPS://[*.]app2.abtasty.com:443 is allowed to accept cookies.
The AB Tasty tag is not present on the page
How to check your tag
To check whether or not the tag is installed, open the browser console, go to the Elements tab and search for try.abtasty.com. For more information, consult the following article: How to check whether AB Tasty’s tag is installed on your website.
You can also make sure that the ABTasty command returns an answer in the console.
If the tag is not present, add it, following the guidelines in our "All about tags" guide.
A Chrome extension is blocking the editor
A few Chrome extensions may prevent the editor from loading. Avoid using Ghostery, Insider, a VPN or Proxy, or an Ad Blockers.
How to check your extensions
Paste the following address into your Chrome URL bar: chrome://extensions/ and disable or remove the Chrome extensions mentioned above.
You haven’t applied the correct source code
Applying source code is the most effective way of loading funnel pages, cart pages with added products, or personalized dashboards. It’s also the best way of fixing editor-loading issues caused by authentication (on a client account, for example) or a page that requires session information (e.g. products to be displayed on the cart page).
There are two ways of applying the correct source code:
👉With the AB Tasty extension
👉With the OuterHTML
Copy the source code of the web page where you’re trying to load the editor using the Copy outerHTML command in the <html> tag (in the first line of the source code).
Paste this source code into the dedicated input in the Main information step in AB Tasty:
You can find more details on how to apply the source code here.
You have Content Security Policy (CSP) or console errors
If you notice CSP errors in the console when trying to load the editor, the server configuration is causing these problems. The security setting may be too high on your server. By default, many clients use a Content Security Policy that blocks everything on their website. This means that every external request has to be allowlisted in the server configuration.
How to check for CSP errors
If you see the following kind of errors, these are caused by CSP errors:
To resolve this issue
Please ask your system administrators or developers to allowlist the following domains:
- default-src 'none'
- frame-src 'self'
- script-src 'self' 'unsafe-eval' blob: *.abtasty.com *.googleapis.com
- connect-src 'self' *.abtasty.com
- img-src 'self' blob: *.abtasty.com *.amazonaws.com
- style-src 'self' unsafe-inline: *.abtasty.com *.gstatic.com *.googleapis.com
- font-src 'self' blob: data: *.abtasty.com *.gstatic.com *.googleapis.com
- Default-src allows AB Tasty to keep strict security as none as the default for all other attributes but the ones we override
- Frame-src allows AB Tasty to iframe your web app in its editor
- Script-src allows AB Tasty to inject a <script> element in your web app once iframed in our editor
- Connect-src allows AB Tasty to connect with APIs via XMLHttpRequest or Websocket fetch – we need it to communicate with our Symfony REST API (via XMLHttpRequest)
- Img-src allows AB Tasty to call image URLs hosted on our domain or from AWS CDN
- Style-src allows AB Tasty to inject inline styling or a <style> element
- font-src allows AB Tasty to inject fonts, whether they come from our domain or the Google Fonts API
As a temporary solution, you can use the Disable Content Security Policy add-on. This extension should block the CSP errors and you should be able to load the editor again.
Other console errors
You may find other errors in the console that block the editor. For instance, if you notice an error related to X-Frame Options, like this:
To resolve this issue
Ask your back-end developers to change the server configuration accordingly. You can also temporarily use the Ignore X-frame headers extension to bypass this type of error.
To allow this extension to read and change all your data on websites that you visit, select "On all sites" from the site access drop-down list