Step 1: Access Your Dashboard
- Visit the DivineAPI login page.
- Enter your email address and password to sign in.
- Click Sign In to proceed.
- New users can select Sign Up to create an account.
Step 2: Locate the Widget
- On your dashboard, navigate to the Widgets section in the left-hand menu.
- Expand the Astrology APIs dropdown and select Astro Nuggets.
Step 3: Choose Your Integration Method
Select the most suitable option based on your website platform:
- Script Code Snippet: Copy and paste this script into your website's HTML for seamless embedding.
- Iframe Code Snippet: Perfect for embedding on platforms that support iframes.
- WordPress Shortcode: Copy and use this shortcode in a WordPress post or page.
For WordPress Users:
- Ensure the appropriate plugin is installed and activated.
- This step is crucial for shortcode functionality.
To Implement:
- Choose your preferred method.
- Click the Copy Icon to copy the code.
- Paste the snippet into the relevant section of your website.
Step 4: Preview the Widget
- Use the Preview Section to see how the widget will appear on your site.
- Test functionality by toggling between zodiac signs and categories like Today, Yesterday, and Tomorrow.
Step 5: Set Up the Widget
1. Create a New Setting
- Click + Create New Setting in the top-right corner.
- Adjust layout, fonts, and colors to match your site’s branding.
Edit an Existing Setting
- Use the Select Setting dropdown to choose a saved setting.
- Click Edit Setting to make updates.
Refer to additional guides for managing multiple widget settings.
Step 6: Personalize the Widget
1. Rename the Setting
- Go to the Setting Name field.
- Enter a clear, descriptive name (e.g., “Astro Nuggets - Modern Theme”).
2. Customize the Color Scheme
- Open the Color Scheme settings.
- Choose from options like Brut, Evergreen, Serenity, Burgundy, or Metallic.
- Use the Pencil Icon to fine-tune background and text colors.
3. Adjust Font Styles
- Access the Fonts section.
- Select typefaces such as Cormorant Garamond, DM Sans, or Montserrat.
- Preview your changes in real-time to ensure readability and aesthetic appeal.
Step 7: Configure Widget Details
1. Update Widget Headings
- Edit the Heading and Subheading fields.
- Examples: Heading - “Astro Nuggets”; Subheading - “Your Guide to the Stars”.
2. Set a Default Zodiac Sign
- Choose a zodiac sign (e.g., Gemini, Taurus) to display by default.
3. Adjust Width Settings
- Select Small, Medium, or Large to fit your site layout seamlessly.
4. Pick a Horoscope Layout
Options include:
- Single Icon: Highlights one zodiac sign at a time.
- Grid Icon: Displays all signs in a grid.
- Carousel Icon: Allows interactive scrolling.
Step 8: Enhance Widget Design
1. Choose Horoscope Icon Layout
- Navigate to the Horoscope Icon Layout settings.
- Select from styles like Classic v1, Minimalist v2, or Bold v3.
2. Customize Recommendation Icon Style
- Pick styles that align with your website’s look, such as v1, v2, v3, v4, or v5.
3. Preview Across Devices
Use the Preview Feature to test your widget on different devices:
- Desktop: Full-screen view.
- Tablet: Medium-screen optimization.
- Mobile: Small-screen compatibility.
Toggle views to ensure consistency in design, fonts, and functionality.
Step 9: Save and Embed
- Click the Save button to finalize your changes.
- Return to the Widget Home page.
- Copy the embed code snippet and paste it into your website’s HTML.
Pro Tip: Test the widget after embedding to verify functionality and design.
Conclusion
The Astro Nuggets Widget delivers tailored astrological insights, enhancing user engagement with daily, weekly, and monthly forecasts. By following these steps, you can integrate and customize the widget to perfectly match your website’s branding and create an engaging visitor experience.