1. Log in to Your WordPress Admin Panel

• Go to your WordPress website's admin panel by navigating to https://yourwebsite.com/wp-admin.
• Enter your credentials to log in.

2. Access the Theme Editor

• From the left-hand menu, navigate to Appearance > Theme Editor.
• Before making any changes, it's always a good idea to back up your theme files or use a child theme to avoid losing customizations during theme updates.

3. Edit the header.php File

• In the Theme Editor, locate the header.php file from the list of theme files on the right sidebar.
• Click on header.php to open it in the editor.

4. Add the Required <link> and <script> Tags

• Inside the header.php file, find the closing </head> tag. This is where you'll add the necessary <link> and <script> tags.
• Copy and paste the following code just before the closing </head> tag:

<link href="https://bundle.notice.studio/index.css" rel="stylesheet" />
<script defer="defer" charset="UTF-8" src="https://bundle.notice.studio/index.js"></script>

5. Save Your Changes

• After adding the code, click the Update File button to save your changes.

6. Insert the Notice Container in Your Desired Location

• Next, you need to decide where you want the "Notice" component to appear on your site.
• If you want the "Notice" to appear on all pages, you can add the container code in the footer.php or a global template file like page.php or single.php.
• Otherwise, just use an HTML block.

7. Edit the Appropriate Template File

• Choose the template file where you want the "Notice" to appear. For instance, if you want it in the footer, open footer.php.
• Alternatively, you can place it within a specific page or post by editing the content directly through the WordPress editor.

8. Add the Notice Target Container

• Add the following div wherever you want the "Notice" component to render:

<div class="notice-target-container" project-id="[your-project-id]"></div>

• Replace [your-project-id] with your actual project ID provided by "Notice".

9. Save Your Changes

• Click the Update File button again to save your changes.

10. Test Your Website

• Visit your website to ensure that the "Notice" component is correctly displayed. You should see the "Notice" rendering where you placed the div container.

11. Troubleshooting Tips

• If the "Notice" does not appear, clear your browser cache or check your browser console for any errors.
• Ensure that your project ID is correctly added to the div container.
• Check that the <link> and <script> tags are correctly added to the header.php file and that no other script is conflicting with it.

12. Backup and Final Check

• Make sure you regularly back up your WordPress theme files to prevent loss of changes.
• Review your site on different devices and browsers to ensure the "Notice" displays properly.

Troubleshootings