Installation Guide for Custom Built Websites

This guide assumes that you have basic knowledge of how to edit your website's files and HTML.

For more technical up-to-date information visit: https://www.npmjs.com/package/@mintmade/widgets

Step 1: Install Mintmade Widgets via Yarn

You'll need to have Node.js and Yarn installed on your machine. Here's how to install the widgets via Yarn:

Open your terminal.
Navigate to your website's root directory (where your main website files are located) using the cd command.
Run the following command to install the Mintmade widgets:

$ yarn add @mintmade/widgets

This will add the Mintmade widgets to the node_modules directory in your project.

Step 2: Link the Widgets in Your HTML

Next, you'll need to link to the widget files in your HTML pages. This is typically done within the <head> section of your HTML. Here's how to do it:

Open the HTML file where you want to use the widgets.
Paste the following code within the <head> section:

<script async type="module" src="/node_modules/@mintmade/widgets/dist/collectors.min.js"></script>
<script async type="module" src="/node_modules/@mintmade/widgets/dist/recentlyCollected.min.js"></script>
<script async type="module" src="/node_modules/@mintmade/widgets/dist/appendix.min.js"></script>

Step 3: Use the Widgets in Your HTML

Now, you can use the widgets within the <body> of your HTML. Here's how to do it:

Decide where you want to place the widget within your HTML. This will typically be within the <body> section.
Insert the appropriate widget HTML. You can customize the widget's behavior and appearance using its attributes.

Here's an example of how to use the widgets:

<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. Adjust the color parameters as per your website's theme. The lang attribute is for the language, you can use the appropriate ISO 639-1 code.

Step 4: Testing

After you've inserted the widgets and saved your HTML file, it's important to test the widgets to ensure they're working correctly. Open the HTML file in a browser and see if the widgets are displayed as expected. If not, check your widget HTML and make sure all the URLs and color parameters are correct.

This guide assumes the file path /node_modules/@mintmade/widgets/dist/ exists on your server, which might not be the case. You might need the help of a developer to get the Mintmade's widget files and place them in the correct directory of your server. If you encounter any issues or the widgets are not displayed, please contact a web developer or the Mintmade's support.

PreviousInstallation Guide for WordPress NextMaking a custom minting link

Last updated 9 months ago