The Candu Chrome Extension

Use the Candu Chrome Extension to easily preview and embed your content within your application

Flora Sanders avatar
Written by Flora Sanders
Updated over a week ago

Candu for Chrome

The Candu Chrome Extension gives you a no-code way to preview and embed your Candu content anywhere you have Candu installed!

There are four key actions you can take with the Chrome Extension:

  1. Preview both content or templates that you have built using the Candu editor or any pre-built Candu templates

  2. Embed both content or templates that you have built using the Candu editor or any pre-built Candu templates

  3. Review any content that has been embedded and either amend the placement rules or disconnect it

  4. Check the installation status for any page where you expect Candu to be installed

Screenshot of the four options within the Candu extension

โ„น๏ธ Watch this 4-minute overview of the Candu Chrome Extension ๐Ÿš€


Preview Content

The Chrome Extension lets you place Candu content anywhere, so you can test how content fits in different areas of your product or website before going live to your users!

Once you have created your content, you can easily preview it by either...

  • Using the 'Preview' button within the Candu Editor to launch your Chrome Extension on your specified page.

    Or...

  • Manually opening the extension and selecting 'My Content', and searching for the content you want to preview.

Then, you can either move your cursor around the page and a turquoise dotting line will show you available selectors/divs. Or, you can click through the selectors/divs in the extension and it'll show where it sits on the page. You can then click on one of those and your content will appear!

GIF showing how to preview from the editor and through manually opening the extension

Top tip: โœจ You can collapse the Chrome Extension and hide the borders to get a real feel for how your Candu content looks and feels within your product.

GIF showing how to hide borders

You can also switch between different 'Workspaces' when previewing content.

Screenshot showing how to switch between Workspaces in the extension

Press Esc at any time or select the three dots and 'Remove Content' to exit out of the preview selector mode.

Screenshot showing how to 'Open in Editor' and 'Remove Content'

If you want to make any edits before you embed your content, you can easily jump back into the editor using the 'Open the Editor' option.

Please find more information on Previewing Content here.


Embedding Content

After you have previewed your content and ensured everything looks perfect, it's time to make your content live for your users!

Click the target icon on your chosen selector/div in the Chrome Extension:

Screenshot of a div with the target icon showing

Once, you've hit the target icon, you'll be able to choose your content position (Above, Below, or Replace), and which page/s you want the content to be embedded on! When you're happy, hit Save to launch it into the wild ๐Ÿ™Œ

GIF showing how to embed content via the extension

โ„น๏ธ Candu must be installed and your domain whitelisted to be able to embed content successfully. If there are any issues the Chrome Extension will notify you under 'Installation Status'.

Please find more information on Embedding Content here.


Review Live Content

To review any content that has been embedded on a specific page and is targeted to you, you can open the Chrome Extension and select 'Live Content'. This will open a list of all the content targeted to you that has been embedded on the page you're on.

Screenshot showing all Live Content

You are able to:

  • Update Placement to amend the placement (selector/div), position (Above, Below, or Replace), and where it is displayed (URL rules).

  • Edit content to open the content in the editor and make any changes.

  • Remove Placement from the content, e.g. prevent the content from being viewed by your users in this div.
    โ€‹

GIF showing how to update a placement via the extension

Check Installation Status

The Extension toolbar allows you to check the direct status of the page you are wanting to embed your content on. You can see...

  • Whether the Candu SDK has been successfully installed

  • Whether you're on the most up-to-date version

  • Whether your site has been successfully whitelisted.

This is really helpful as a first place to go when troubleshooting any issues you may be having embedding content.

GIF showing the Page Status option

Did this answer your question?