Step 1: Access Your Dashboard
- Visit the DivineAPI login page.
- Enter your email and password to log in.
- Click “Sign In” to proceed.
- New users can click “Sign Up” to create an account.
Step 2: Locate the Widget
- In your dashboard, navigate to the “Widgets” section on the left menu.
- Expand the “Astrology APIs” dropdown and select “Astro Chic Picks.”
Step 3: Choose Integration Options
Choose the integration method based on your website platform:
- Script Code Snippet: Copy and paste this code into your website's HTML to embed the widget.
- Iframe Code Snippet: Ideal for iframe embedding, compatible with most platforms.
- WordPress Shortcode: Copy this shortcode to embed the widget into a WordPress page or post.
Plugin Installation (For WordPress Users)
- Ensure the required plugin is installed and activated on your WordPress website.
- This step ensures the proper functionality of shortcodes.
Copy and Implement the Code
- Select your preferred option.
- Click the copy icon to copy the code snippet.
- Paste the code into the designated section of your website.
Step 4: Preview the Widget
- Check the Preview Section to view how the widget appears on your site.
- Toggle zodiac signs and date categories like Today, Yesterday, and Tomorrow to ensure functionality.
Step 5: Setting Up the Widget
1. Create and Edit a New Setting
- Click “+ Create New Setting” on the top-right corner.
- Adjust options like layout, fonts, and colors to align with your site’s style.
Edit Existing Settings
- Choose a saved setting from the “Select Setting” dropdown.
- Click “Edit Setting” to make updates.
- Refer to additional guides if needed for managing multiple settings.
Step 6: Personalize the Widget
1. Rename the Setting
- Go to the Setting Name field.
- Enter a clear, descriptive name (e.g., "Astro Picks - Bold Design").
2. Modify the Color Scheme
- Open the Color Scheme settings.
- Select from options like Brut, Evergreen, Serenity, Burgundy, or Metallic.
- Use the Pencil Icon to tweak specific colors for backgrounds and text.
3. Adjust Font Styles
- Access the Fonts section.
- Choose from typefaces like DM Sans, Montserrat, or Cormorant Garamond.
- Preview changes in real-time to ensure readability.
Step 7: Configure Widget Details
1. Update Widget Headings
- Edit the Heading and Subheading fields.
- Add a title like "Astro Chic Picks" and a Subheading such as “Your daily guide to the stars.”
2. Set Default Zodiac Sign
- Select a zodiac sign (e.g., Libra, Aries) to show by default.
3. Adjust Width Settings
- Choose Small, Medium, or Large to fit your page layout.
4. Select Horoscope Layout
Options include:
- Single Icon: Displays one sign at a time.
- Grid Icon: Shows all signs in a grid format.
- 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 v1, v2, or v3.
2. Set Recommendation Icon Style
- Pick a style that complements your site’s look, such as v1 or v2.
3. Preview Across Devices
Use the Preview Feature in the top-right corner to check your Heartbreak Reading widget on different devices:
- Desktop: Full-screen functionality.
- Tablet: Medium-sized screens.
- Mobile: Small-screen optimization.
Switch views to ensure the design, fonts, and content look great everywhere!
Step 9: Save and Embed
- Hit the Save button to confirm your changes.
- Navigate back to the Widget Home page.
- Copy and embed the code snippet into your website’s HTML.
Tip: Always test the widget post-embedding to ensure it works seamlessly.
Conclusion
The Astro Chic Picks Widget offers personalized daily, weekly, and monthly astrological insights. By following these steps, you can fully customize and integrate it into your website to enhance engagement and align with your branding