Installation Guide for WordPress

This guide is meant for non-developers and assumes that you have basic knowledge of WordPress administration.

Step 1: Edit Your WordPress Template

The first step to installing Mintmade's minting widgets on your WordPress website is editing the WordPress template itself.

1. Backup your website. Before making any changes to your website, it's always a good idea to create a backup. This way, you can restore your website to its previous state if something goes wrong.

2. Access your WordPress files. This can be done through the cPanel provided by your web hosting company, via an FTP client such as FileZilla, or WP Admin.

3. Find your theme's header file. In your WordPress directory, navigate to wp-content/themes/{your-theme-name}. Here you should see file named header.php. These are the files you'll need to edit to add the widgets to your website.

In the next steps, you'll add the necessary scripts to your header.php file to install the widgets.

Step 2: Add Mintmade Widgets into Your Headers

1. In the header.php file paste the following:

2. <script async type="module" src="https://www.unpkg.com/@mintmade/widgets/dist/collectors.min.js"></script>
   <script async type="module" src="https://www.unpkg.com/@mintmade/widgets/dist/recentlyCollected.min.js"></script>
   <script async type="module" src="https://www.unpkg.com/@mintmade/widgets/dist/appendix.min.js"></script>

3. Click "Save".

Step 3: Use Widgets on Your Pages

You can use the widgets on your pages by adding the appropriate HTML to the places you want these widgets to be displayed.

Here's a brief explanation of the parameters for each widget:

1. <mm-collectors>: Displays a list of collectors.

2. <mm-recently-collected>: Shows recently collected items.

3. <mm-appendix>: Provides additional information about the collection.

Each of these widgets can take several attributes to customize their behavior and appearance. Here's an example of how to use them:

<mm-collectors
  lang="en"
  attached="true"
  target="https://mint.yourwebsite.com/"
  primaryColor="#14cc9e"
  hoverColor="#000"
  hoverTextColor="#fff"
  secondaryColor="#000"
></mm-collectors>

<mm-recently-collected
  target="https://mint.yourwebsite.com/"
  primaryColor="#14cc9e"
  hoverColor="#000"
  hoverTextColor="#fff"
  cardRatio="11:15"
></mm-recently-collected>

<mm-appendix
  lang="en"
  target="https://mint.yourwebsite.com/"
></mm-appendix>

Replace "https://mint.yourwebsite.com/" and "https://yourwebsite.com/news/your-article" with your actual URLs. Change the color parameters as per your site's theme. The lang attribute is for the language, you can use the appropriate ISO 639-1 code.

If you need to place this in the body of a page or post, switch the WordPress editor to Text mode and paste the code.

Please remember that your WordPress hosting environment should support ES6 import functionality for these widgets to work.

Step 4: Testing

After you've inserted the widgets and updated your template, it's crucial to test everything. Visit the page in a browser to see if the widgets are displayed correctly. If not, check your links and colors to make sure they're correct.

For more technical information go to https://www.npmjs.com/package/@mintmade/widgets