Embed MyPetrolPrice.com Widgets

Fuel Price Search Wizard

1. Ideal Location: Mobile View - Main Content, Desktop View- Main Content or 300px wide Column.
2. Dimentions: Width - 300px, Height - Variable
3. Styling/ CSS: Should integrate well with the Styling of your website Directly. No special CSS used.
4. Sample Code: Copy this Code into your HTML Code. <div id='mypp_embd' data-url='https://www.mypetrolprice.com/Embed/EmbedResponse.aspx'></div> <script type='text/javascript' src='https://www.mypetrolprice.com/Embed/script/EmbedJS.js'></script>
5. Appearance: Here is how the Widget will appear on your website-

Specific Fuel Price in city

1. Ideal Location: Header/ Footer.
2. Dimentions: Width - Variable, Height - Single line (can overflow)
3. Styling/ CSS: Should integrate well with the Styling of your website Directly. No special CSS used.
4. Sample Code (City Name - STATIC): Copy this Code into your HTML Code. <div id='mypp_embd_SpecFuelCity' fuel="Diesel" city="Pune" data-url='https://www.mypetrolprice.com/Embed/SpecificFuelCity/SpecificFuelCity.aspx'></div> <script type='text/javascript' src='https://www.mypetrolprice.com/Embed/SpecificFuelCity/SpecificFuelCity.js'></script>
5. Sample Code (City Name - INTERACTIVE CITY DROPDOWN): Copy this Code into your HTML Code. <div id='mypp_embd_SpecFuelCityDD' fuel="Petrol" city="Pune" data-url='https://www.mypetrolprice.com/Embed/SpecificFuelCityDD/SpecificFuelCityDD.aspx'></div> <script type='text/javascript' src='https://www.mypetrolprice.com/Embed/SpecificFuelCityDD/SpecificFuelCityDD.js'></script>
6. Appearance: Here is how the Widget will appear on your website-

All Fuel Price in city

1. Ideal Location: Header/ Footer or inline text.
2. Dimentions: Width - Variable, Height - Single line (can overflow)
3. Styling/ CSS: Should integrate well with the Styling of your website Directly. No special CSS used.
4. Sample Code (City Name - STATIC): Copy this Code into your HTML Code. <div id='mypp_embd_AllFuelCity' city="Pune" data-url='https://www.mypetrolprice.com/Embed/AllFuelCity/AllFuelCity.aspx'></div> <script type='text/javascript' src='https://www.mypetrolprice.com/Embed/AllFuelCity/AllFuelCity.js'></script>
5. Sample Code (City Name - INTERACTIVE CITY DROPDOWN): Copy this Code into your HTML Code. <div id='mypp_embd_AllFuelCityDD' city="Pune" data-url='https://www.mypetrolprice.com/Embed/AllFuelCityDD/AllFuelCityDD.aspx'></div> <script type='text/javascript' src='https://www.mypetrolprice.com/BEmbed/AllFuelCityDD/AllFuelCityDD.js'></script>
6. Appearance: Here is how the Widget will appear on your website-

Only Fuel Price in city

1. Ideal Location: Header/ Footer or inline text/ paragraphs
2. Dimentions: Width - 4 to 6 digits, Height - Single line
3. Styling/ CSS: Should integrate well with the Styling of your website Directly. No special CSS used.
4. Sample Code (City Name - STATIC): Copy this Code into your HTML Code. <div id='mypp_embd_SpecFuelCity' fuel="Diesel" city="Pune" data-url='https://www.mypetrolprice.com/Embed/SpecificFuelCity/SpecificFuelCity.aspx'></div> <script type='text/javascript' src='https://www.mypetrolprice.com/Embed/SpecificFuelCity/SpecificFuelCity.js'></script>
5. Sample Code (City Name - INTERACTIVE CITY DROPDOWN): Copy this Code into your HTML Code. <div id='mypp_embd_SpecFuelCityDD' fuel="Petrol" city="Pune" data-url='https://www.mypetrolprice.com/Embed/SpecificFuelCityDD/SpecificFuelCityDD.aspx'></div> <script type='text/javascript' src='https://www.mypetrolprice.com/Embed/SpecificFuelCityDD/SpecificFuelCityDD.js'></script>
6. Appearance: Here is how the Widget will appear on your website-

If you face any issues or need any help or a need a special implementation of Widgets please Contact us.

Thank you,
-Team MyPetrolPrice.