Step 1: Log in to Your Dashboard
- Visit the DivineAPI login page.
- Enter your registered email address and password.
- Click the “Sign In” button to access your dashboard.
- If you’re a new user, click “Sign Up” to create an account.
Step 2: Navigate to the Widget Section
- Once logged in, locate the “Widgets” section in the left-hand menu.
- Expand the “Lifestyle APIs” dropdown and select “Beauty By Star.”
Step 3: Access Integration Options
On the Beauty By Star Widget page, you’ll find multiple integration methods:
- Script Code Snippet: Embed directly into your website's HTML for seamless integration.
- Iframe Code Snippet: Perfect for platforms that support iframe embedding.
- WordPress Shortcode: Ideal for WordPress users to simplify the integration.
Tip: Choose the most suitable option and copy the code snippet using the provided copy icon.
Step 4: Preview the Widget
- Use the Preview Section on the right-hand side to see how the widget will appear on your website.
- Toggle between zodiac signs (e.g., Aries, Taurus) and content categories like Today, Yesterday, Tomorrow to ensure the predictions and layout are displaying correctly.
Step 5: Configuring the Widget
1. Create a New Setting
- Click the “+ Create New Setting” button at the top-right.
- Name your setting (e.g., “Beauty Recommendations - Setting 01”).
- Adjust options like color schemes, fonts, and layout to match your brand.
2. Edit an Existing Setting
- Select a previously created setting from the “Choose Your Setting” dropdown.
- Click “Edit Setting” to make modifications.
- Refer to detailed guides if needed for managing multiple settings.
Step 6: Adjust the Customization Options
1. Change the Setting Name
- Navigate to the Setting Name field.
- Enter a descriptive name (e.g., "Beauty Insights - Minimal Design").
- Use clear and concise labels for easier management of settings.
2. Customize the Color Scheme
- Access the Color Scheme option in the panel.
- Choose from pre-set themes like Brut, Metallic, Evergreen, Burgundy, Serenity, or Emerald.
- Edit colors (e.g., Primary for backgrounds and Secondary for text) using the Pencil Icon for fine-tuning.
3. Adjust the Fonts
- Go to the Fonts section.
- Choose from options like Cormorant Garamond, Montserrat, or DM Sans.
- Preview in real-time to ensure font selection enhances readability and fits your brand.
Step 7: Configure Widget Content
1. Edit Widget Headings
- Navigate to the Heading and Subheading fields in the settings panel.
- Input a title for your widget (e.g., Beauty By Star) to reflect your brand's identity.
- Add a brief description in the Subheading field (e.g., "Beauty By Star provides daily, weekly, monthly, and yearly astrological predictions, helping you understand the influences of planets on your life.").
- Use headings that match your brand's tone and style.
2. Set Default Zodiac Sign
- Choose a default zodiac sign (e.g., Aries, Leo) to display when the widget loads.
3. Adjust the Widget Width
- Navigate to Width Settings and select from Small, Medium, or Large options.
- Choose a size that complements your website layout.
4. Customize the Horoscope Layout
Select a layout style under Horoscope Layout:
- Single Icon: Displays one horoscope icon at a time.
- Grid Icon: Shows all horoscope icons in a grid.
- Carousel Icon: Allows interactive scrolling through icons.
Step 8: Enhance Visual Elements
1. Customize Horoscope Icons layout
- Access Layout Options: Navigate to the Horoscope Icon Layout dropdown.
- Choose a Style: Select from designs like v1, v2, v3, etc., to match your branding.
- Real-Time Preview: Icons update instantly in the preview as you select.
- Experiment: Test different styles to find the one that best fits your website’s look.
2. Customize the Recommendation Icon Style
- Choose a style for recommendation icons (e.g., v1, v2, v3) to match your website’s aesthetics.
3. Preview Across Devices
Use the Preview Functionality to view the widget on:
- Desktop: Ensure it looks polished on larger screens.
- Tablet: Check adaptability for medium-sized devices.
- Mobile: Verify responsiveness for smaller screens.
Step 9: Save and Embed Your Widget
- Click the Save button to apply all changes.
- Return to the Widget Home section.
- Copy the generated code snippet and embed it into your website’s HTML.
Tip: Always test the widget after embedding to ensure flawless performance.
Conclusion
With the Beauty By Star Widget, you can provide daily, weekly, monthly, and yearly beauty and astrology insights tailored to each zodiac sign. By following these steps, you’ll have a fully customized and integrated widget that aligns with your website’s branding and enhances user engagement.