When Embedding Candu components, several customers of ours prefer to have their developers manually add divs for specific Candu content. We recommend this practice when:

1. A team uses Candu for a business critical use case such as a homepage or getting started page. In which case, it is preferable to have a div in code so that the teams can:
   1. Make sure the content will persist across deploys, and not be removed accidentally by the dev team.
   2. Add integration testing such as Cypress to verify that Candu is rendering consistently and correctly.
2. Class names are autogenerated, so inherently non-stable. This is common when using libraries such as Styled Components.
3. There is no viable div to inject the content where you would like to.
4. You would like to conditionally show or hide content based on application status. A common use case as such are empty states.
   1. If a customer has no records then <div id="candu-empty-state" /> else render the records.

To learn more about embedding content into your existing UI with Candu view our guide here.

Adding a div

Step 1: Identify the Placement and Purpose

Determine where and why you want to add new divs to your product pages. Consider the specific functionality or content you wish to include within these divs. Additionally, determine which div will be used to embed Candu content.

Step 2: Identify the Appropriate Section

Within the HTML file, locate the section or container where you want to add the new divs. This could be a specific <div> element, a section identified by an ID or class, or any other suitable HTML element that serves as a container.

Step 3: Add the New Divs

Within the identified section, add new <div> elements to create the desired divs. For the div where you want to embed Candu content, ensure you assign a unique ID or class to it. We recommend adding a comment to document why a given div has been added.

<div id="candu-div" />

Step 4: Deploy the code

Ship the new div to production to be able to target it from the Chrome extension or as a Candu Placement.

# Best practices

Clear Naming Convention:

We recommend using clear naming like candu-homepage, candu-emptystate or candu-banner so your team can easily identify the spot that has been allocated for them to use.

Size and Responsiveness:

Ensure that the div where you embed Candu content has appropriate dimensions to display the content properly, for example a full page takeover vs. sidebar only. Consider the size of the Candu content and make sure the div can accommodate it without distortion or overflow. Additionally, make the div responsive so that the Candu content adjusts well on different screen sizes.

Unique ID

When embedding Candu content into a div, ensure that the div retains a consistent and unique ID. This prevents the content from being regenerated with a unique ID on every page load. Keeping a consistent ID ensures a seamless experience and avoids unnecessary content reloading.

Repeating Content

If a div repeats across multiple pages, communicate this clearly to your team. They should be aware that the content will repeat unless they set up URL targeting in Candu where they can specify which page(s) they want to display the content on.

By following these steps and considering the Candu content-related factors, you can effectively add new divs to your product pages and seamlessly integrate Candu content into the designated div.